Can anyone explain why my 3d transform effect works fine on chrome/FF but has ppixellated all the pure css divs and text when viewed on safari.
Without the 3d transform it looks normal in safari.
The odd thing is i built this exactly the same i another site which works fine in safari.
The only difference is the blocks on this site are flex and the ones on the other site are just percentage built inline - but that can’t be causing this surely…
Thanks all in advance
@OvertonGraphics, could be an aliasing problem i think ?
I’ve found this
which could be a fix apparently EDIT : @Brando was going to share this to you but i wrote too fast for him
If you do a lot of nice interactions/animations, you may have noticed some elements being jiggy during the animations: they blur and tend to move a pixel up, texts lose their antialiasing for the span of the animation.
I could almost fix them all with the code I found in this post:
I’m using this:
-webkit-transform: translateZ(0) scale(1.0, 1.0);
And when text is involved I can add font-smoothing: …
Might help you too
I have tried it on what i think would be the elements to try it one but it’s not worked sof ar for me
Try it on the body maybe
@zbrah - i tired it on the body but it deleted the background behind the blocks and they were still blurred.
Here’s the link of the other site where my 3d transform effect works fine in safari etc. if it helps.
Appreciate all the help!
@OvertonGraphics which Safari version are you using?
From what I see on this end, everything is rendering as expected in both browsers:
And the 3D transforms are working without any issues.
There’s a bit of aliasing on the SVG elements in Safari if you zoom in (fairly atypical behavior). So another route you could go is using div blocks instead for those angled items.
Could you please let me know what browser version you’re using by sending me your information from this page?
There should be a small share link when you visit the page which you can send to me.
Ironically Chrome is out of date but safari is up to date.
Interesting that its working for you.
I might restart my whole mac, but its weird that it works fine on the luup site but not my new one. considering its exactly the same except for one site uses divs with percentages and the other (new one) is flex.
Thanks again for the help!
Still broken for me after a restart
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.