search

jlmakes / scrollreveal

Animate elements as they scroll into view.
https://scrollrevealjs.org/
22.41k stars 2.25k forks source link

Visibility not updated on revealed elements in IE 11 #534

Open alexroper opened 3 years ago

alexroper commented 3 years ago

The example used on the User Experience page to "Prevent Flickering" suggests adding a "visibility: hidden" style to items that will transition, but this isn't working in IE 11. ScrollReveal doesn't seem to update the visibility on revealed elements in IE 11.

The problem can be seen in your example demo: https://jsbin.com/fuvusofere/edit?html,css,output

I ran this thru WebPageTest to confirm it wasn't just my local setup that had the issue.

https://www.webpagetest.org/result/210413_AiDc2R_dc0e38e7c29f55599d9512320d9ec0c5/

GIF demo from WebPageTest

Environment

jlmakes commented 3 years ago

Thanks for the report. Looks like something here isn't working with IE11, in that visibility: visible isn't being applied.

https://github.com/jlmakes/scrollreveal/blob/bc8fd853b56d06d265b2630ccb9c39e1db7fe9b7/src/instance/functions/style.js#L18-L30

Which at first glance suggests that line 27: inlineMatch.some(m => m.match(/visibility\s?:\s?visible/i)) is returning true in IE11. I'll look into refactoring this, this isn't the first time string parsing and working directly with the style attribute has caused bugs.

duncanheffron commented 3 years ago

Hi, I just came across the same issue. I tried doing a hot fix for now by doing it through the opacity, but then the same issues occurs. Maybe some how on IE besides getting the inline styles the javascript also receives the styles originally set in the css file. Probably this results in returning the true, and why it's not setting the inline styles.

Maybe this helps in researching a solution.

dijkermans commented 2 years ago

Is visibility:visible not applied or doesn't it overrule the css? Adding !important to the inline style may work.