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">

<head>
	<style>
	#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; }
	
	.scaled
	{
		-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);
	}
	</style>
</head>

<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>
	</div>
	
	<script>
		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);
		}
		
		fu        

Answers


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

Search




Leave an answer