Tagged: , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 29, 2015 at 12:09 pm #480136
    carlemil

    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

    July 31, 2015 at 10:05 am #481203
    Ismael

    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: https://css-tricks.com/snippets/css/retina-display-media-query/

    Best regards,
    Ismael

    July 31, 2015 at 10:41 am #481232
    carlemil

    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

    July 31, 2015 at 2:17 pm #481319
    Yigit

    Hey!

    Please add following code to Quick CSS 

    .avia-safari ul.products.slide-entry-wrap.active-slide {
-webkit-transform: translateZ(1000)!important; 
}

    Cheers!
    Yigit

    October 31, 2015 at 8:49 pm #527968
    carlemil

    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

    November 2, 2015 at 4:45 pm #528603
    Yigit

    Hi!

    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.

    Regards,
    Yigit

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