Visibility not updated on revealed elements in IE 11

[alexroper]

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/

Environment

• Operating System: Windows 10
• Browser Version: IE 11
• ScrollReveal Version: 4.0.9

[jlmakes]

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

scrollreveal/src/instance/functions/style.js

Lines 18 to 30 in bc8fd85

	/**
	* Generate inline styles
	*/
	const inline = {}
	const inlineStyle = element.node.getAttribute('style') || ''
	const inlineMatch = inlineStyle.match(/[\w-]+\s*:\s*[^;]+\s*/gi) || []
	inline.computed = inlineMatch ? inlineMatch.map(m => m.trim()).join('; ') + ';' : ''
	inline.generated = inlineMatch.some(m => m.match(/visibility\s?:\s?visible/i))
	? inline.computed
	: [...inlineMatch, 'visibility: visible'].map(m => m.trim()).join('; ') + ';'

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]

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]

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