Banner items fade in using jQuery (adds display:block) disappear on resize and disappear on scroll on iPad/iPhone

dixonandmoe / rellax

Lightweight, vanilla javascript parallax library

https://dixonandmoe.com/rellax/

MIT License

7.06k stars 878 forks source link

Banner items fade in using jQuery (adds display:block) disappear on resize and disappear on scroll on iPad/iPhone #184

Open VSHoward opened 4 years ago

VSHoward commented 4 years ago

I haven't tested on all devices, but it affects iPhones and iPads and if you resize your desktop screen. I'm fading in an image and a title within a banner using jQuery, but once you scroll on iPhone or iPad or resize your desktop browser Rellax removes the display: block in the style="". These items also are Rellax enabled for parallax with the data-rellax-speed="" on each element.

Any ideas on how to fix this?

VSHoward commented 4 years ago

I found a way around this by adding additional wrapping elements, but any elements with inline CSS that are added by jQuery (i.e.: style="display:block") get removed by the Rellax inline transform style.