为什么在 Safari 上转换翻译不能正常工作？

Question

我经常使用此代码使 div 在视图中居中：

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

它在 Firefox、Internet Explorer 和 Chrome 上运行良好，但在 Safari 上运行不佳。

在 Safari 网络浏览器中将图像居中的解决方法是什么？

Answer 1

您需要另一种供应商前缀样式。

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

请参阅下面了解哪些浏览器支持什么以及必须添加什么前缀。 http://caniuse.com/#feat=transforms2d

Answer 2

以下是我在所有经过测试的浏览器和移动设备（Chrome、IE、Firefox、Safari、iPad、iphone 5 和 6、Android).

Safari（包括 ios 设备）的关键是添加其他转换 css 规则，而不仅仅是：

transform: translateY(-50%);

您需要向其中添加这组规则：

-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);

这是我的一些工作代码：

img.ui-li-thumb {
    position: absolute;
    left: 1px;
    top: 50%;

    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

Answer 3

在某些情况下，您必须使用：

-webkit-transform: translate3d(-50%,-50%,0);

有时在移动浏览器上效果更好。

Answer 4

.some-element {
  transform: translate(50px 50px) rotate(15deg) scale(1.2);
}

如果上面的转换对你不起作用，你可以将它们单独写出来作为它们自己的属性：

.some-element {
  translate: 50px 50px;
  rotate: 15deg;
  scale: 1.2;
}

参考：https://css-tricks.com/css-individual-transform-properties-in-safari-technology-preview/

为什么在 Safari 上转换翻译不能正常工作？

Why on Safari the transform translate doesn't work correctly?

css

safari