Created
April 1, 2014 23:32
-
-
Save natevw/9925186 to your computer and use it in GitHub Desktop.
Test case for <https://code.google.com/p/chromium/issues/detail?id=358877>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html><head> | |
<meta charset="utf-8"> | |
<title>Inset border styling</title> | |
<style> | |
.list { | |
box-shadow: inset 3px 3px 10px grey; | |
height: 95px; | |
width: 150px; | |
overflow: auto; | |
} | |
.wrapper { | |
position: relative; | |
z-index: -1; | |
} | |
.item { | |
display: block; | |
width: 100px; | |
height: 25px; | |
background: yellow; | |
margin: 5px; | |
} | |
.item:nth-child(even) { | |
background: green; | |
} | |
.item.workaround { /* needed for proper redraw on scroll */ | |
-webkit-transform: translatez(0); | |
} | |
</style> | |
</head><body> | |
<div class=list> | |
<div class=wrapper> | |
<span class=item>Item</span> | |
<span class=item>Item</span> | |
<span class=item>Item</span> | |
<span class=item>Item</span> | |
<span class=item>Item</span> | |
<span class=item>Item</span> | |
<span class=item>Item</span> | |
<span class=item>Item</span> | |
</div> | |
</div> | |
<button>Toggle workaround</button> | |
<script> | |
document.querySelector('button').addEventListener('click', function () { | |
var items = document.querySelectorAll('.item'); | |
Array.prototype.forEach.call(items, function (el) { | |
el.classList.toggle('workaround'); | |
}); | |
}, false); | |
</script> | |
</body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment