background-color causes scroll to stop working inside iframe

Copper Contributor

Found an interesting behavior with scrollable iframe.

The conditions to reproduce it are:

- Outer page has a scrollbar on an ancestor of the iframe element

- Iframe is scrollable (there is an element inside of the iframe's document body which is larger than the body

- Iframe's document body element has a background-color CSS rule which is not transparent nor initial.


Reproducing case below.


This only appear to affect Edge. Is anyone aware of why background-color might have this effect?


======index page======
		<div style="overflow:auto;width:500px;height:600px;">
				<div style="height: 601px;">
					<iframe src="./repro-inner.html" >

<html dir="ltr" lang="en">
			background-color: #fff;
		<div style="height:5000px"></div>


0 Replies