Transform: Translate is compatible with which browsers?

Asked

Viewed 33 times

2

Example of use works well in modern browsers the doubt is in which versions will not be compatible.

<h2 style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); color:orange;">Centralizado</h2>

2 answers

3

According to Caniuse.com, this is the current situation:

Gráfico do Can I Use

Note that this graphic is from 2D Transforms as a whole, which includes Translate.

The items marked with [1] do not support CSS Transform in SVG

Still, you can see this:

  • Below the FF42, the transform-origin does not work in SVG either. In IE9 the Caret of a textarea disappears when you use Translate.

  • In Android 2.3 the scale does not affect the background.

Link:

https://caniuse.com/#search=Translate

1


According to the MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/transform#Browser_compatibility

+---------------+---------------+----------------------------+-------------------+---------------+------------+
| Feature       | Chrome        | Firefox (Gecko)            | Internet Explorer | Opera         | Safari     |
+---------------+---------------+----------------------------+-------------------+---------------+------------+
| Basic support | (Yes) -webkit | 3.5 (1.9.1)-moz16.0 (16.0) | 9.0 -ms10.0       | 10.5-o12.5    | 3.1-webkit |
+---------------+---------------+----------------------------+-------------------+---------------+------------+
| 3D Support    | 12.0-webkit   | 10.0-moz16.0 (16.0)        | 10.0              | Não suportado | 4.0-webkit |
+---------------+---------------+----------------------------+-------------------+---------------+------------+

Note that for some versions you need to use -XXXX (ex: -Webkit)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.