Jump to content
Search Community

Pseudo Class Error on Safari

sawacrow test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hello !

Below codepen is working well, (chrome and safari)

See the Pen LYGXrMq by DickeySingh (@DickeySingh) on CodePen

 ( original )

 

But im trying like above code some different method. Im trying on "::before" class. Thats working well on chrome but on safari working weird as you can see.

 ( Bugged, pseudocode class version)

 

( left side is chrome, right side is safari. you can see the distorted straight line lines.)

 

 

I can solve that problem if do original method but maybe there is a solution to this problem...

 

image 1.jpg

 

New bug detected:
error still on "absolute" items...

 

See the Pen abaqQeE by sawacrow (@sawacrow) on CodePen

Link to comment
Share on other sites

  • Solution

That is most definitely a browser rendering bug (unrelated to GSAP). Also, filters are HORRIBLE for performance, especially such a large blur, so be careful. Setting will-change: transform, filter seemed to resolve things for me and significantly improve performance: 

See the Pen eYLMYpm?editors=0110 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

16 minutes ago, GreenSock said:

That is most definitely a browser rendering bug (unrelated to GSAP). Also, filters are HORRIBLE for performance, especially such a large blur, so be careful. Setting will-change: transform, filter seemed to resolve things for me and significantly improve performance: 

 

 

yes its about safari's render system.

thats solution awesome, problem is solved thank you so much !
 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...