-
Posts
-
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.
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,
VictoriaHi,
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,
RikardActually 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.
Hi,
Which version of Safari are you using? I checked on 11.1 and it looks fine on my end :)
Best regards,
YigitSafari 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…
Hi,
It looks fine even after zooming in for me. I attached a screenshot in private content field below.
Best regards,
YigitI’ve just tried on a different Mac running Safari 11.1 and I get the same pixellated text. I’ve attached a screenshot.
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,
VictoriaI’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.
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,
VictoriaHi
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.
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
- You must be logged in to reply to this topic.