In Google Chrome I have found the following bug:
I have a fixed sized div, with position: absolute, and with a simple transform:
-webkit-transform: translate3d(100px, 100px, 0px)
I change the display of the div from 'block' to 'none' and then to 'block' again, but the div does not appear any more. I noticed that removing position: absolute fixes the issue, but this is certainly a bug in Chrome.
Test with the following html (A yellow div with a red border should blink every 500 ms)
See the jsbin example for a demo (NOTE: only reproducible in the full screen jsbin - and please don't move the mouse - http://jsbin.com/UkOJuxO/1 - if you want to view it in the editable jsbin, the bug is not reproducible, since the page is rendered inside an iframe. But just use the html below and access the page locally with Chrome, and just can see the bug is easily reproducible)
The html is the one below. If you open this in Chrome from a local html page, the bug is very easy to reproduce. But if opening the dev tools and hovering over the blinking div, will make it appear once.
In all other browsers, everything works without any problems.
<body>
<div id="test">
</div>
<style>
#test {
height: 400px;
width: 400px;
border: 1px solid red;
background: yellow;
position: absolute;
transform: translate3d(100px, 100px, 0px);
-ms-transform: translate3d(100px, 100px, 0px);
-moz-transform: translate3d(100px, 100px, 0px);
-webkit-transform: translate3d(100px, 100px, 0px)
}
</style>
<script>
var d = document.getElementById('test')
var delay = 500
function blink(){
d.style.display = 'none'
setTimeout(function(){
d.style.display = 'block'
setTimeout(blink, delay)
}, delay)
}
setTimeout(blink, delay)
</script>
</body>
