2016-04-11 7 views
1

Быстрый вопрос, который может быть довольно простым для кого-то. В CSS моего веб-сайта я использовал translate3d() для некоторых отличных анимаций. Дело в том, что все эти анимации - 2d, я только что использовал translate3d(), чтобы использовать рендеринг графического процессора, где это применимо.css, translate() vs translate3d() support

Другими словами, я использовал что-то вроде следующего:

transform: translate3d(50%, 50%, 0); и анимировать его, в то время как transform: translate(50%, 50%); бы добиться такого же визуального эффекта, без наддува GPU.

Теперь я немного оглядывался на CanIUse и видел, что, к сожалению, когда дело доходит до Internet Explorer (конечно), это немного не хватает поддержки translate3d(), поддержка преобразований 2d не лучше, но, по крайней мере, это дает мне доступ к IE 9.

Итак, мой вопрос в том, что (я думаю, что я работаю на Mac и не могу найти способ проверить его сам в данный момент), если я использую translate3d() , хотя IE не поддерживает это конкретное свойство, признает ли он, что я использую только преобразования X и Y и все еще отображаю? Или было бы лучше просто переключить их все на обычные старые translate()?

Как я уже сказал, единственной причиной, по которой я неохотно, является то, что при сложных анимациях ускорение графического ускорителя приятно иметь.

Если IE не будет автоматически отступать (что я ожидаю и боюсь), может ли кто-нибудь предложить какие-либо другие методы, чтобы я мог использовать рендеринг графического процессора в браузерах, которые будут его поддерживать, но отступать для IE?

Могу ли я просто перечислить преобразования 2d и 3d в моем css (в этом порядке), чтобы IE игнорировал translate3d() или мог бы взять дополнительные ресурсы?

Заранее благодарим за любой ввод, все это очень ценится.

+0

Возможный дубликат [Детектирование «преобразования: translate3d» поддержка] (http://stackoverflow.com/questions/5661671/detecting-transform-translate3d-support) – Vucko

+0

Спасибо за ответ, я действительно не нашел эту запись, но я не верю, что это дубликат. Мой главный вопрос заключался в том, что IE будет отступать, поскольку преобразование было по сути 2d, независимо от третьей переменной. Но эта статья выглядит довольно интересной, и мне придется читать, спасибо еще раз! –

ответ

2

вы можете использовать -ms-transform, которые применяются только к IE9 и transform для других браузеров

-ms-transform: translate(50%, 50%); /* IE9 support*/ 
transform: translate3d(50%, 50%, 0); /* IE10+ and other browser*/ 

IE9 будет игнорировать transform и использовать -ms-transform

Смежные вопросы