search

min30327 / luxy.js

Inertia scroll and parallax effect plugin in Vanilla.js
598 stars 86 forks source link

Parallax Elements Move Rough on Safari #17

Open yuuiko opened 4 years ago

yuuiko commented 4 years ago

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 commented 4 years ago

It Seems removing CSS Transitions on luxy-el worked.

DevanandGowda commented 4 years ago

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

yuuiko commented 4 years ago

@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