Attachment 357723 Details for Bug 192877 – animating scrollable content to expose paint order bug

animating scrollable content to expose paint order bug

testcase.html (text/html), 937 bytes, created by jonjohnjohnson on 2018-12-19 14:05:23 PST

(hide)

Description:

Filename:

MIME Type:

Creator: jonjohnjohnson

Created: 2018-12-19 14:05:23 PST

Size: 937 bytes

patch

obsolete

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>overflow can *sometimes affect implicit stacking order acting like it's positioned</title>
  <style>
  	.box {
  		width: 200px;
  		height: 200px;
  		overflow: scroll;
  	}
  	.box:nth-child(2) {
  		margin-top: -100px;
  		margin-left: 100px;
  	}
  	.box:nth-child(1) .content {
  		background-color: red;
    	height: 250px;
  	}
  	.box:nth-child(2) .content {
  		background-color: green;
    	--height-start: 150px;
    	--height-end: 250px;
    	animation: anim-height ease 2s alternate infinite;
  	}
  	@keyframes anim-height {
    	0%,50%   { height: 150px;}
    	100% { height: 250px;}
  	}
  	/* also firefox on macos places red boxes scrollbar on top of green element unless it is positioned */
  </style>
</head>
<body>
  <div class="box">
    <div class="content"></div>
  </div>
  <div class="box">
    <div class="content"></div>
  </div>
</body>
</html>

Actions: View

Attachments on bug 192877: 357723