[IE9] Page content is still scrollable when lightbox is triggered, leading to a repaint issue

[jameshopkins]

In IE9, when both the computed height of the '.lightbox' and HTML element is sufficient to allow clipping of their containing block (the viewport), the latter element is still scrollable, even though overflow: hidden is applied to the BODY element. This, in turn, leads to repaint issues of the page content upon scrolling.

The fix seems to be adding overflow: hidden to the HTML element.

[jameshopkins]

I've spent some time today looking into this a bit more.

By opening Developer Tools, going to 'HTML', and clicking the 'HTML' node (or any of it's descendants), the issue remedies itself.

I've also disabled both scroll event listeners on window to rule out any race conditions/conflicts.

So, still no fix; although I'd be happy to pair with someone on this further sometime.

[peter-mouland]

hey, what team are you in (just so i can put you in the right team on here)?

cool, pairing sounds good then. we can create a new project and separate the code into a component (which we're doing to all toolkit code).

half a day to get going should be plenty of time.

[peter-mouland]

@jameshopkins let me know if you wanted to work together on create the lightbox as a component to get this fixed

[jameshopkins]

Hey @peter-mouland. Apologies I haven't been contactable for a while. I'll speak to my scrum master to see if there's time for me to pair up with you.