проблемы преобразования масштаба div
Я использую масштабное преобразование на div, чтобы я мог использовать дочерние элементы с заданными позициями и размерами и по-прежнему масштабироваться для заполнения экрана. Я пишу в GWT 2.7 и у меня проблемы с изменением видимости элементов в Chrome и Safari (ошибка веб-кита?) На Mac. Вот пример:
<!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>
Проблема связана с переполнением: скрытым. Я включил это в контейнер, потому что это то, что делает GWT. Таким образом, я удалил переполнение из контейнера и добавил переполнение: скрыто для тела. Это работает для моего приложения, потому что я масштабируюсь, чтобы соответствовать окну. В контейнере могут возникнуть проблемы с отсечением, но теперь порядок рисования работает правильно.
Это ошибка webKit, которая находится в процессе исправления.