robinhouston · August 29, 2015 14:03
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>Cut-down fullscreen bug test</title>
 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

 <style>
 body { margin: 0; font-family: sans-serif; }
 #main { position: absolute; margin: 12px; width: 600px; }
 #canvas { position: relative; top: 20px; width: 400px; height: 200px; margin: auto; border: 1px solid #666; }
 #canvas #ball { position: absolute; left: 0; top: 90px; width: 20px; height: 20px; border-radius: 10px;
 	background: -webkit-radial-gradient(50% 33%, circle, #DDD, #333);
 	-webkit-transform: translate(0, 0); }
 </style>

 <body>
 <div id="main">
 	<h1>Safari fullscreen problem</h1>
 	<p>Safari 7.0.4 – and probably other versions – has a problem whereby
 	under some circumstances leaving fullscreen mode prevents D3 transitions
 	from working.</p>

 	<p>If you press ‘Animate’, then ‘Enter full screen’, then ‘Exit full screen’,
 	you will find that the Animate button no longer works.</p>

 	<p>It seems likely that this is a manifestation of
 	<a href="https://bugs.webkit.org/show_bug.cgi?id=88940">WebKit bug 88940</a>.</p>

 	<button id="fullscreen">Enter full screen</button>
 	<button id="animate">Animate</button>
 	<div id="canvas">
 		<div id="ball"></div>
 	</div>
 </div>
 <script>

 // Fullscreen behaviour
 var fullscreen_button = d3.select("#fullscreen");
 fullscreen_button.on("click", function() {
 	if (document.webkitIsFullScreen) {
 		document.webkitExitFullscreen();
 	} else {
 		document.documentElement.webkitRequestFullscreen();
 	}
 });
 document.addEventListener("webkitfullscreenchange", function() {
 	if (document.webkitIsFullScreen) {
 		fullscreen_button.text("Exit full screen");
 	} else {
 		fullscreen_button.text("Enter full screen");
 	}
 });

 // Animation
 var ball = d3.select("#ball");
 d3.select("#animate").on("click", function() {
 	ball.transition().duration(1000).styleTween("-webkit-transform", function() {
 		return d3.interpolateString("translate(0px, 0)", "translate(380px, 0)");
 	}).transition().duration(1000).styleTween("-webkit-transform", function() {
 		return d3.interpolateString("translate(380px, 0)", "translate(0px, 0)");
 	});
 });

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Cut-down fullscreen bug test</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

	<style>
	body { margin: 0; font-family: sans-serif; }
	#main { position: absolute; margin: 12px; width: 600px; }
	#canvas { position: relative; top: 20px; width: 400px; height: 200px; margin: auto; border: 1px solid #666; }
	#canvas #ball { position: absolute; left: 0; top: 90px; width: 20px; height: 20px; border-radius: 10px;
	background: -webkit-radial-gradient(50% 33%, circle, #DDD, #333);
	-webkit-transform: translate(0, 0); }
	</style>

	<body>
	<div id="main">
	<h1>Safari fullscreen problem</h1>
	<p>Safari 7.0.4 – and probably other versions – has a problem whereby
	under some circumstances leaving fullscreen mode prevents D3 transitions
	from working.</p>

	<p>If you press ‘Animate’, then ‘Enter full screen’, then ‘Exit full screen’,
	you will find that the Animate button no longer works.</p>

	<p>It seems likely that this is a manifestation of
	<a href="https://bugs.webkit.org/show_bug.cgi?id=88940">WebKit bug 88940</a>.</p>

	<button id="fullscreen">Enter full screen</button>
	<button id="animate">Animate</button>
	<div id="canvas">
	<div id="ball"></div>
	</div>
	</div>
	<script>

	// Fullscreen behaviour
	var fullscreen_button = d3.select("#fullscreen");
	fullscreen_button.on("click", function() {
	if (document.webkitIsFullScreen) {
	document.webkitExitFullscreen();
	} else {
	document.documentElement.webkitRequestFullscreen();
	}
	});
	document.addEventListener("webkitfullscreenchange", function() {
	if (document.webkitIsFullScreen) {
	fullscreen_button.text("Exit full screen");
	} else {
	fullscreen_button.text("Enter full screen");
	}
	});

	// Animation
	var ball = d3.select("#ball");
	d3.select("#animate").on("click", function() {
	ball.transition().duration(1000).styleTween("-webkit-transform", function() {
	return d3.interpolateString("translate(0px, 0)", "translate(380px, 0)");
	}).transition().duration(1000).styleTween("-webkit-transform", function() {
	return d3.interpolateString("translate(380px, 0)", "translate(0px, 0)");
	});
	});

	</script>
	</body>
	</html>