On this site: https://jointlyheroes.dev we are experiencing really bad lag on Safari on mobile. The lag is with the sliders, accordions and everything that has a transition. How is this fixable? Looks like a bug coming with 1.9.2
Lately, Safari has been causing problems for web development, and I’ve encountered similar issues. I had a section that contained numerous elements with separators designed using :before or :after .
I’ve inspected your slider. There are some elements with :before and :after. Not sure if this is the cause (at least yes for me). Do you have condition for those slider items?
To test, try removing the styling of :before(need to remove :before pseudo element from the class as well) from this class .expertise-slide::before to see if it fixes the lag.
I removed the ::before but still no luck. The before is a bricks overlay.
Yes. I noticed that. Then you let the Dev to chec it out for you. As I know, many has been facing issues with Safari recently.
I think I figured it out on another page. Removed a filter blur on a before and boom lag gone
So… When there is a :before with a filter on it and you use transform(-50%, 50%) it gets laggy. It needs to be transform: translate(-50%, -50%) translate3d(0, 0, 0);
Nice to know. So the laggy is still caused by the :before pseudo element but another styling. What’s wrong with Safari. 
As I checked your slider, it is a query loop, correct?
It is a strange bug once again for Safari. The transform3d kicks in the gpu of a device than the lag stops. Yes my slider is a query loop.
Hi @jointlyheroes ,
There are many articles related to Safari’s performance when using filter CSS
You could google “safari filter lag” for more info.
It’s not related to Bricks.
Try the solution transform: translateZ(0) in CSS filter is very slow on Safari with different order, can someone explain? - Stack Overflow or your transform: translate(-50%, -50%) translate3d(0, 0, 0); should tell Safari render those CSS by using GPU power.
will-change might be another option.
https://dev.opera.com/articles/css-will-change-property/
Hi @jornes ,
Can check my reply in the email, I used transform: translateZ(0), and seems all the issues were resolved.
Regards,
Jenn
1 Like
Hey @itchycode
Yes! I received your email but haven’t yet had time to reply today. I will reply to your email when I have time later. Still have something else to clarify.
Thank you!