У меня проблема с тем, что области экрана становятся белыми в хроме. Ниже приведен упрощенный тестовый пример. Из тестов видно, что проблема связана с комбинацией масштабирования преобразования и поворота. Чтобы воспроизвести проблему с несколькими html-элементами, я преувеличил ситуацию и использовал квадрат размером 5000 пикселей, уменьшенный на 0,125.
Обратите внимание, что только первый тест воспроизводит ошибку, а в Firefox она не воспроизводится.
с уменьшением масштаба: http://jsfiddle.net/AxkEj/46/embedded/result/
width: 5000px;
height: 5000px;
-webkit-transform: scale(0.125);
без масштаба: http://jsfiddle.net/47SmB/1/embedded/result/
width: 625px;
height: 625px;
с увеличением: http://jsfiddle.net/YpfPt/2/
width: 50px;
height: 50px;
-webkit-transform: scale(10);
с увеличением вместо масштаба:
width: 5000px;
height: 5000px;
zoom: 0.125;
сообщить об ошибке в webkit с ответом
спецификация преобразования CSS включает следующий раздел, который может пролить свет на проблему:
Накопленная матрица трехмерного преобразования представляет собой матрицу 4×4, а объекты, подлежащие преобразованию, представляют собой двумерные блоки. Чтобы преобразовать каждый угол (a, b) коробки, матрица должна быть сначала применена к (a, b, 0, 1), что приведет к четырехмерной точке (x, y, z, w). Это преобразуется обратно в трехмерную точку (x ', y ', z ') следующим образом:
If w > 0, (x′, y′, z′) = (x/w, y/w, z/w).
Если w = 0, (x′, y′, z′) = (x ⋅ n, y ⋅ n, z ⋅ n). n — это значение, зависящее от реализации, которое должно быть выбрано так, чтобы x 'или y 'было намного больше, чем размер области просмотра, если это возможно. Например, (5px, 22px, 0px, 0) может стать (5000px, 22000px, 0px) с n = 1000, но это значение n будет слишком маленьким для (0,1px, 0,05px, 0px, 0). Эта спецификация не определяет точно значение n. Концептуально (x′, y′, z′) бесконечно далеко в направлении (x, y, z).
Если w ‹ 0 для всех четырех углов преобразованного блока, блок не отображается.
обновление: ошибка не воспроизводится и в проводнике. см. скрипку ниже:
