background-color causes scroll to stop working inside iframe

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======
<html>
	<body>
		<div style="overflow:auto;width:500px;height:600px;">
				<div style="height: 601px;">
					<iframe src="./repro-inner.html" >
					</iframe>
				</div>
			</div>
		</div>
	</body>
</html>

======repro-inner.html======
<html dir="ltr" lang="en">
	<head>
		<style>
		body
		{
			background-color: #fff;
		}
		</style>
	</head>
	<body>
		<div style="height:5000px"></div>
	</body>
</html>

Forum Discussion

background-color causes scroll to stop working inside iframe

Resources