Home Ask Login Register

Developers Planet

Your answer is one click away!

Moronicus February 2016

div scale transform problems

I am using a scale transform on a div so that I can use child elements with set positions and sizes and still scale to fill the screen. I am writing in GWT 2.7 and am having problems changing element visibility in Chrome and Safari (webkit bug?) on a Mac. Here's an example:

<!doctype html>

<html lang="en">

	#container { position: absolute; left: 50px; top: 30px; width: 576px; height: 456px; overflow: hidden; background-color: cyan; }
	#backCanvas { position: absolute; left: 44px; top: 260px; }
	#frontCanvas { position: absolute; left: 240px; top: 397px; }
		-ms-transform-origin: 0 0;	/* IE 9 */
		-ms-transform: scale(1.2);
		-webkit-transform-origin: 0 0; /* Safari 8 */
		-webkit-transform: scale(1.2);
		transform-origin: 0 0;
		transform: scale(1.2);

<body onload="initCanvas()">
	<div id="container" class="">
		<canvas id="backCanvas" tabindex="-1" width="490" height="158"></canvas>
		<canvas id="frontCanvas" tabindex="-1" width="87" height="31"></canvas>
		<button onclick="showScaled(false)">Unscaled</button>
		<button onclick="showScaled(true)">Scale transform</button>
		<button onclick="showElement('frontCanvas',false)">Hide canvas</button>
		<button onclick="showElement('frontCanvas',true)">Show canvas</button>
		function initCanvas()
			fillCanvas(document.getElementById("backCanvas"), "green");
			fillCanvas(document.getElementById("frontCanvas"), "red");
		function fillCanvas(canvas, color)
			var context = canvas.getContext("2d");
			context.fillStyle = color;
			context.fillRect(0, 0, canvas.width, canvas.height);


Moronicus February 2016

The problem has to do with overflow:hidden. I included that in the container because that's what GWT does. So, I removed overflow from the container and added overflow:hidden to the body. This works for my app because I scale to fit the window. There may be some clipping problems with the container, but now the draw order works correctly.

This is a webKit bug that is in the process of being fixed.

Post Status

Asked in February 2016
Viewed 1,485 times
Voted 7
Answered 1 times


Leave an answer

Quote of the day: live life

Devs Planet ®

2014-2016 www.devsplanet.com

Devs Planet © all rights reserved