Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #480136

    The ‘Product slider‘ is displaying blurry text and images in Safari on Retina screens (both OS X and iOS), however Chrome and other browsers aren’t experiencing this issue. Tried some of the options mentioned in other threads regarding the same issue in the portfolio grid – those CSS fixes did however not fix this issue.
    Example of normal text field, and product slider


    Hey Carl Emil!

    Thank you for using Enfold.

    This is the default styling of the heading tag which works well on retina displays.

    .products .product h3, .products .product h4, .products .product h5, .products .product h6 {
        padding-top: 5px;
        font-size: 1em;
        line-height: 1.3em;
        font-weight: normal;
        margin: 0;

    And this is your own css modification in the style.css file which is not retina ready:

    .inner_product_header h3 {
        font-family: "brandon-grotesque";
        font-size: 16px !important;
        font-weight: bold !important;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: #0a4d6d;

    You can use css media queries specifically for retina displays:

    Best regards,


    Hi Ismael,

    Thanks for your reply.
    I don’t quite get why modified CSS properties would render the text blurry on Retina devices? And only in Safari – not chrome?
    The pictures are also not retina, even though the original quality, and the thumbnail quality, is fine. Chrome is showing the images fine. The heading tag shouldn’t induce that issue, right?

    However, i went ahead and out-commented my heading styling, at no avail:
    Retina optimized text, non-optimized text, and blurry images
    Out-commented header tag



    Please add following code to Quick CSS

    .avia-safari {
    -webkit-transform: translateZ(1000)!important; 



    Didn’t do the trick. I can see that your own enfold theme examples on the site, are having the same issue. Is there a fix on the way for future releases?

    Best, Carl



    Please try changing the code to following one

    .avia-safari .avia-content-slider, .avia-safari .avia-content-slider-inner, .avia-safari .avia-content-slider-inner .slide-entry-wrap {
    -webkit-perspective: 0px !important;

    If that too does not work, please create a temporary admin login and post it here privately.


Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.