ashrewdmint/webkit-redraw-bug.html

## webkit-redraw-bug.html
<!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>
	<!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>