I’m seeing an issue in Safari with 3d transforms I’m applying to images. They appear to have hard jagged edges after the 3D transform is applied.Seem fine in Chrome and Firefox, but Safari looks bad.
Searching the forum, I’ve included the following code in the header: body { -webkit-font-smoothing: antialiased; }
Still having the same issue. Is there something I need to run on or off?
Update: now I’m noticing this in Chrome as well. I could have sworn that Chrome was fine but now I see it in Safari, and Chrome… Firefox looks perfect (see attached)
Okay - I have discovered something going on when I use multiple interactions to both 3d transform the icons, and slideup/fade them in. I turned the slideup/fadein interaction off on the icons on the left of the large center icon and the jaggies are gone. (See image)
However, I need to find a way to get these to fade in and up as they rotate. Could there be some issue with the way I’m applying the slideup/fade-in here?
There were several ideas offered on stackoverflow thread, but the one that seems to work best was adding a transparent outline to the images being used in the 3D transforms. This is simple, yet it works the best.
outline: 1px solid transparent;
All browsers work perfectly now, even on iOS.
Thank you Kasper, and thank you awesome Webflow Community!
