0
我在div上使用縮放轉換，以便我可以使用具有設置位置和大小的子元素，並且仍然可以縮放以填充屏幕。我正在編寫GWT 2.7，並且在Mac和Chrome中改變Chrome和Safari中的元素可見性（webkit bug？）時遇到問題。這裏有一個例子：div scale轉換問題
<!doctype html>
<html lang="en">
<head>
\t <style>
\t #container { position: absolute; left: 50px; top: 30px; width: 576px; height: 456px; overflow: hidden; background-color: cyan; }
\t #backCanvas { position: absolute; left: 44px; top: 260px; }
\t #frontCanvas { position: absolute; left: 240px; top: 397px; }
\t
\t .scaled
\t {
\t \t -ms-transform-origin: 0 0; \t /* IE 9 */
\t \t -ms-transform: scale(1.2);
\t
\t \t -webkit-transform-origin: 0 0; /* Safari 8 */
\t \t -webkit-transform: scale(1.2);
\t
\t \t transform-origin: 0 0;
\t \t transform: scale(1.2);
\t }
\t </style>
</head>
<body onload="initCanvas()">
\t <div id="container" class="">
\t \t <canvas id="backCanvas" tabindex="-1" width="490" height="158"></canvas>
\t \t <canvas id="frontCanvas" tabindex="-1" width="87" height="31"></canvas>
\t
\t \t <button onclick="showScaled(false)">Unscaled</button>
\t \t <button onclick="showScaled(true)">Scale transform</button>
\t \t <button onclick="showElement('frontCanvas',false)">Hide canvas</button>
\t \t <button onclick="showElement('frontCanvas',true)">Show canvas</button>
\t </div>
\t
\t <script>
\t \t function initCanvas()
\t \t {
\t \t \t fillCanvas(document.getElementById("backCanvas"), "green");
\t \t \t fillCanvas(document.getElementById("frontCanvas"), "red");
\t \t }
\t \t
\t \t function fillCanvas(canvas, color)
\t \t {
\t \t \t var context = canvas.getContext("2d");
\t \t \t context.fillStyle = color;
\t \t \t context.fillRect(0, 0, canvas.width, canvas.height);
\t \t }
\t \t
\t \t function showScaled(scaled)
\t \t {
\t \t \t document.getElementById("container").className = scaled ? "scaled" : "";
\t \t }
\t \t
\t \t function showElement(element, show)
\t \t {
\t \t \t // none of these work when scaled
\t \t \t document.getElementById(element).style.display = show ? null : "none";
// \t \t \t document.getElementById(element).style.visibility = show ? "visible" : "hidden";
// \t \t \t document.getElementById(element).style.zIndex = show ? "100" : "-100";
// \t \t \t document.getElementById(element).style.left = show ? "240px" : "-1000px";
\t \t }
\t </script>
</body>
</html>
它適用於我的Mac上的Chrome。 –
有趣，謝謝你的嘗試。對於我來說，我會在紅色帆布前看到綠色的帆布，而這絕不應該發生。我還沒有找到修復程序。也許我可以強制容器重新佈局/重繪？ – Moronicus