Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #960407

    There are some very old threads about this issue whereby the product slider text is blurry and non-retina in Safari.

    I’ve tried removing all the custom css and using the css from those old threads one at a time, but nothing fixes it.

    The Product Slider is Retina in Google Chrome, but not Safari.

    #961045

    Hey John,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    .avia-safari #top .avia-content-slider-inner { 
         -webkit-perspective: none !important;
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #964262

    Thank you, that worked in Quick CSS.

    #965186

    Hi,

    Great, glad you got it working. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    #966597

    Actually it kind of works. The product slider is still not true retina. If you zoom in the text is just rendered and not ‘real’ text. The rest of the text on the page stays smooth (as it should) but the product slider pixelates.

    #966608

    Hi,

    Which version of Safari are you using? I checked on 11.1 and it looks fine on my end :)

    Best regards,
    Yigit

    #971734

    Safari 11.1.1

    The page looks fine at 100%, but if you zoom in the rest of the text on the page stays smooth but the product slider pixelates and looks bad. If you use pinch to zoom on a touch pad you’ll notice it being incorrectly rendered as you zoom in and it re-renders badly pixellated as soon as you take your fingers off the touchpad. The rest of the page zooms in as you’d expect.

    It’s not a big deal and there won’t be too many people other than me that will ever notice though :-)

    You can see an example in the link…

    • This reply was modified 6 months ago by  ESB.
    #971746

    Hi,

    It looks fine even after zooming in for me. I attached a screenshot in private content field below.

    Best regards,
    Yigit

    #971836

    I’ve just tried on a different Mac running Safari 11.1 and I get the same pixellated text. I’ve attached a screenshot.

    #972198

    Hi ESB,

    Can you please try the code like this:

    
    .avia-safari #top .avia-content-slider-inner * { 
         -webkit-perspective: none !important;
    }
    

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #972776

    I’ve replaced the code with the code above but it doesn’t seem to make a difference. When you zoom in you get the exact same effect as per my previous screenshot.

    #974199

    Hi ESB,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    .avia-safari #top .avia-content-slider-inner small { 
         -webkit-perspective: none !important;
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #985893

    Hi

    This doesn’t work, either in quick Css or directly into custom.css

    In fact it looks non-retina at all zoom levels now in Safari on Mac and iOS.

    #986289

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    CSS Snippet:

    
    .avia-safari #top .avia-content-slider, .avia-safari #top .avia-content-slider-inner, .avia-safari #top .avia-content-slider-inner .slide-entry-wrap {
    -webkit-perspective: initial;
    }
    
    

    Best regards,
    Yigit

    #986348

    I think that’s fixed it!

    Thank you :-)

    #986452

    Hi ESB,

    Glad that Yigit helped you :)
    Let us know if you need further assistance or if we can close this thread.

    Best regards,
    Nikko

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.