ManualTests/scrollbars/scrollbars-in-composited-layers.html - WebKit - Git at Google

 <!DOCTYPE html>

 <html>
 <head>
     <style>
     .scroll {
         width: 200px;
         height: 200px;
         border: 1px solid black;
         margin: 15px;
         padding: 5px;
         overflow-y: scroll;
         -webkit-transform: translateZ(0);
         box-shadow: 0 0 15px black;
     }

     .rotated {
         -webkit-transform: rotate3d(0, 0, 1, 45deg);
     }
     .scroll > div {
         background-color: silver;
         width: 500px;
         height: 1000px;
     }
     </style>
 </head>
 <body>

     <p>Overlay scrollbars (on Mac) should show in the correct place when scrolling.</p>
     <div class="scroll">
         <div></div>
     </div>

     <p>Overlay scrollbars (on Mac) should show in the correct place when scrolling, and the resize corner should show in the correct place.</p>
     <div class="scroll" style="resize: both; overflow:hiddens">
         <div></div>
     </div>

     <p>Overlay scrollbars (on Mac) should show in the correct place when scrolling, and the resize corner should show in the correct place.</p>
     <div class="rotated scroll" style="resize: both; overflow:hiddens">
         <div></div>
     </div>

 </body>
 </html>
	<!DOCTYPE html>

	<html>
	<head>
	<style>
	.scroll {
	width: 200px;
	height: 200px;
	border: 1px solid black;
	margin: 15px;
	padding: 5px;
	overflow-y: scroll;
	-webkit-transform: translateZ(0);
	box-shadow: 0 0 15px black;
	}

	.rotated {
	-webkit-transform: rotate3d(0, 0, 1, 45deg);
	}
	.scroll > div {
	background-color: silver;
	width: 500px;
	height: 1000px;
	}
	</style>
	</head>
	<body>

	<p>Overlay scrollbars (on Mac) should show in the correct place when scrolling.</p>
	<div class="scroll">
	<div></div>
	</div>

	<p>Overlay scrollbars (on Mac) should show in the correct place when scrolling, and the resize corner should show in the correct place.</p>
	<div class="scroll" style="resize: both; overflow:hiddens">
	<div></div>
	</div>

	<p>Overlay scrollbars (on Mac) should show in the correct place when scrolling, and the resize corner should show in the correct place.</p>
	<div class="rotated scroll" style="resize: both; overflow:hiddens">
	<div></div>
	</div>

	</body>
	</html>