проблемы преобразования масштаба div

80
7

Я использую масштабное преобразование на 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>

спросил(а) 2016-02-09T01:36:00+03:00 4 года, 7 месяцев назад
1
Решение
121

Проблема связана с переполнением: скрытым. Я включил это в контейнер, потому что это то, что делает GWT. Таким образом, я удалил переполнение из контейнера и добавил переполнение: скрыто для тела. Это работает для моего приложения, потому что я масштабируюсь, чтобы соответствовать окну. В контейнере могут возникнуть проблемы с отсечением, но теперь порядок рисования работает правильно.

Это ошибка webKit, которая находится в процессе исправления.

ответил(а) 2016-02-24T23:36:00+03:00 4 года, 7 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема