Для моего проекта areallybigpage.com (*), я пытаюсь посмотреть, как далеко мы можем с CSS 'transform: scale(...).
Это работает и отображает текст при нормальном размере:
#id1 { position: absolute; transform-origin: 0 0; transform: scale(10000); }
#id2 { position: absolute; transform-origin: 0 0; transform: scale(0.0001);}<div id="id2"><div id="id1">Bonjour</div></div> На самом деле кажется, что в вашем тесте хотя бы для firefox * максимальная высота в CSS px является проблемой.
* (В хроме максимальный scale() множитель/делитель кажется 10000)
Если вы добавите третий div с фиксированной позицией, и вы установите свои divs на этот максимум CSSpx, вы увидите, что чем выше коэффициент/делитель, тем меньше внутренние divs:
s=150000;
document.getElementById('p').addEventListener('click', function(){
s*=1.1; doit();}, false);
document.getElementById('m').addEventListener('click', function(){
s/=1.1; doit();}, false);
function doit(){
document.getElementById('id2').style.transform = 'scale('+1/s+')';
document.getElementById('id1').style.transform = 'scale('+s+')';
document.getElementById('r').innerHTML = s;
}#id1 { transform-origin: 0 0; transform: scale(1); width:17895697px; height: 17895697px; background:#AA00AA;}
#id2 {transform-origin: 0 0; transform: scale(1); width: 17895697px; height: 17895697px; background:#00AA00; }
#id3 { position: absolute; height: 100%; width: 100%;background:#AFAFAF;}
#p {position: fixed; top: 3em;}
#m {position: fixed; top: 3em; left: 3em;}
#r {position: fixed; top: 4em;}<div id="id3"><div id="id2"><div id="id1">Bonjour</div></div></div>
<button id="p">+</button><button id="m">-</button><p id="r"></p>Я не считаю, что это проблема с браузерами, но больше касается ПК, на котором вы его запускаете.
Аппаратное ускорение/ускорение графики будет воспроизводить часть большая в том, как отображается ваша страница, и поэтому вам может потребоваться включить ее в вашу "страницу".
Многие из вас, вероятно, уже знают об этом, но для остальных, здесь быстрый совет, который вы можете найти полезным.
Быстрый совет: Если вы используете браузер Chrome или Chromium и аппаратное ускорение отключено для вашей видеокарты, вы можете попробовать заставить его улучшить качество воспроизведения видео (например, на YouTube), а также поддержку таких функций, как 3D-вид Земли в новые Карты Google.
Чтобы проверить, использует ли браузер Chrome/Chromium аппаратное ускорение, откройте новую вкладку, введите:
"chrome://gpu"(без кавычек) и посмотрите в разделе "Состояние функции графики" - все (или, по крайней мере, большинство) функции должны сказать "аппаратное ускорение". подробнее...
Ваша видеокарта также играет огромную роль в скорости рендеринга /etc, и поэтому я бы не стал полностью избегать использования transform: scale(...), но упоминал бы о любых посетителях, для достижения наилучших результатов, разрешите аппаратное ускорение и убедитесь, что ваши графические драйверы обновлены... '
Но реалистично, вам нужна эта способность? Не могли бы вы использовать другой подход? (т.е. если вы использовали эту идею для генерации фонового эффекта, например, не могли бы вы использовать svg/pseudo effects/etc?).
В заключение, я не считаю, что это ошибка, но я думаю, что это будет способ увидеть, кто "получил улучшенное аппаратное ускорение" / "графические возможности" с их комбинацией браузера/ПК.
Дополнительная литература
Я не думаю, что для transform:scale(...) существует ограничение. В последней версии Chrome я получил до 10 000 000 без проблем. Но ваша проблема может не быть transform:scale(...), если у вас есть очень маленький текст, который вы делаете с ним больше. Существует предел того, насколько мал font-size:..., он не может быть меньше 0,01px. Если у вас нет такого небольшого текста, я не понимаю, почему вы хотели бы иметь такое высокое значение для transform:scale(...), текст был бы слишком велик, чтобы кто-нибудь мог его прочитать.