div比例变换问题答案

【问题标题】：div scale transform problemsdiv比例变换问题
【发布时间】：2016-02-25 04:36:09
【问题描述】：

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

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

【问题讨论】：

它适用于我 Mac 上的 Chrome。
有趣，感谢您的尝试。对我来说，我把绿色画布放在红色画布前面，这绝不应该发生。我还没有找到解决办法。也许我可以强制容器重新布局/重绘？

标签： javascript html css gwt

【解决方案1】：

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

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

【讨论】：