WebKit Video Overlay Redraw Bug
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> | |
<title>WebKit Bug</title> | |
<style type="text/css"> | |
#container { position: relative; width: 800px; } | |
#controls { position: absolute; bottom: 0; left: 0; width: 100%; } | |
#controls, #controls * { height: 30px; } | |
#bar-outer { background: black; } | |
#bar-inner { position: absolute; background: red; width: 20px; } | |
</style> | |
<script type="text/javascript"> | |
window.addEventListener('load', function(){ | |
var video = document.getElementById('video'); | |
video.play(); | |
var controls = document.getElementById('controls'); | |
var bar = document.getElementById('bar-inner'); | |
controls.addEventListener('click', function(e){ | |
bar.style.width = (e.offsetX) + 'px'; | |
}, false); | |
var button = document.getElementById('button'); | |
button.addEventListener('click', function(e) { | |
if (controls.style.overflow == 'hidden') { | |
controls.style.overflow = 'visible'; | |
button.setAttribute('value', 'Add overflow:hidden;'); | |
} else { | |
controls.style.overflow = 'hidden'; | |
button.setAttribute('value', 'Remove overflow:hidden;'); | |
} | |
}); | |
}); | |
</script> | |
</head> | |
<body> | |
<div id="container"> | |
<video id="video" width="800" height="334" poster="http://video-js.zencoder.com/oceans-clip.png"> | |
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4"> | |
</video> | |
<div id="controls"> | |
<div id="bar-outer"> | |
<div id="bar-inner"></div> | |
</div> | |
</div> | |
</div> | |
<p> | |
<input type="button" value="Add overflow:hidden;" id="button" /> | |
</p> | |
<p>Instructions: after the page loads, the video will start playing. Click to the right of the red bar and notice that the width of the bar increases exactly to the point where your cursor is. Click the "Add overflow:hidden;" button. Then make the red bar shorter and try to make it longer again several times. The width of the bar won't be updated like it was before. Change the size of the window to see the bar snap to the width it should be.</p> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment