▼
Streaming live at 10am (PST)

Crunchy 3D Images - Safari Anti-Aliasing Issue

#1

Hi Webflow Forum Folks,

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?

Site: http://3d-crunchy.webflow.io/

Share Link
https://preview.webflow.com/preview/3d-crunchy?preview=1ce90d233f872ff67e17b878a6f636cd

Thanks,

JFly

#2

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)

Any thoughts here?

#3

Looks crusty over here, too. OS X 10.11.2 Chrome.

#4

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?

Thanks,

JFly

#5

Maybe this can help you?

#6

Excellent @kasperkazzual

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!

(happy)

JFly

#7

This really should be marked as a bug fix, considering it affects TONS of Webflow sites that use these common effects.

See: http://forum.webflow.com/t/blurry-images-on-non-retina-screens/23383

Or this specific page: http://tempsandbox.webflow.io/test3 (try on Chrome)

@cyberdave, is the Webflow team aware of this issue?

closed #8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.