luxy.js icon indicating copy to clipboard operation
luxy.js copied to clipboard

Parallax Elements Move Rough on Safari

Open yuuiko opened this issue 5 years ago • 3 comments

Might have been a recent safari update but it's not performing smoothly.

Parallax elements sharply vibrate while scrolling, before jumping to their end position sharply after inertia has stopped.

Would be great if this is looked into! Great library.

yuuiko avatar May 19 '20 05:05 yuuiko

It Seems removing CSS Transitions on luxy-el worked.

yuuiko avatar May 20 '20 01:05 yuuiko

@yuuiko how do you remove transitions from it? It would be helpful if you can provide some context

DevanandGowda avatar May 25 '20 16:05 DevanandGowda

@DevanandGowda

So I had a div with classes "luxy-el" AND "card" on this one div. This div was not moving smoothly with luxy.

After a bit of experimentation, I found that luxy uses the CSS Transform and Transition to achieve its effect.

Now, my "card" class also had its own transition effect, which made it scale on click.

When I removed this transition from my card class, luxy-el worked smoothly for that div.

It seems like you cannot have a css transition effect and possibly not a css transform together with a luxy-el as they conflict on safari.

In order to preserve my scale on click, i wrapped the card in another div that only had luxy-el as a class, then within it the div with only "card" as a class. That way luxy-el won't mix with the css transition of my card class

yuuiko avatar May 25 '20 16:05 yuuiko