Question

我在div上使用缩放变换，以便我可以使用具有设置位置和大小的子元素，并且仍然可以缩放以填充屏幕。我正在写GWT 2.7并且在Mac上改变Chrome和Safari（webkit bug？）中的元素可见性时遇到了问题。这是一个例子：

＆＃13;

<!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);
		}
		
		function showScaled(scaled)
		{
			document.getElementById("container").className = scaled ? "scaled" : "";
		}
		
		function showElement(element, show)
		{
			// none of these work when scaled
			document.getElementById(element).style.display = show ? null : "none";
//			document.getElementById(element).style.visibility = show ? "visible" : "hidden";
//			document.getElementById(element).style.zIndex = show ? "100" : "-100";
// 			document.getElementById(element).style.left = show ? "240px" : "-1000px";
		}
	</script>
</body>

</html>

＆＃13;

Answer 1

问题与溢出有关：隐藏。我把它包含在容器中，因为这就是GWT所做的。所以，我从容器中删除溢出并添加溢出：隐藏到正文。这适用于我的应用程序，因为我缩放以适应窗口。容器可能存在一些剪切问题，但现在绘制顺序正常工作。

这是一个正在修复的webKit错误。

div规模转换问题

1 个答案: