Safari不支持-webkit-transform: scale()。

Question

帮帮我，我很绝望。

我快要完成我的网页了，我做了一个临时域名，但我的朋友说在Safari上有问题。我查看了一下，但是我真的无法解决它。

问题是我缩小了所有的图片和标志以使它们适合页面，但Safari不允许这样做。以下是一个例子：

.midlogo {
overflow:hidden;
z-index: 1;
background-image: url(images/whitelogo.png);
position: absolute;
-webkit-transform: scale(0.2, 0.2);
transform: scale(0.2, 0.2);
-ms-transform: scale(0.2, 0.2);
-moz-transform: scale(0.2, 0.2);
-o-transform: scale(0.2, 0.2);
top: -840px;
left: -650px;
height: 2560px;
width: 2560px;
background-repeat: no-repeat;

我尝试了几乎所有方法，但是已经没有更多想法了。在Chrome中，-webkit-可以工作，但在Safari中却无效。

请帮助我。

jsfiddle链接：https://jsfiddle.net/s8mm8Lm2/1/

- Help Me

---

我们能否使用jsfiddle？ - jShoop

创建了 JSFiddle 并更新了问题！ - Help Me

尝试使用这个jsfiddle链接：演示。我已经添加了一个占位图像并关闭了CSS。我正在查看问题，可能与jpg格式的背景图像有关。你尝试过其他格式吗？ - jShoop

请记得在URL内部加上引号： background-image="url('importantToPutQuotesAroundThis.png')" 我已经有一个可用版本这里。您可以看到Safari中显示了一张图片。因此，为了保险起见，请使用 png图片格式 。 - jShoop

还没有修好...感谢迄今为止的帮助！ - Help Me

Answer 1

不知怎么搞的，问题解决了，但我也不知道是怎么解决的。-webkit- 永远是个谜...

- Help Me

Answer 2

当我注意到我的一些元素被缩放了scale(.75)，而其他的没有时，我解决了一个类似的问题。

这两个元素之间唯一的区别是成功缩放的元素是那些具有display:block的元素。

当我将要缩放的所有内联元素添加display:block时，缩放问题得到了解决。

这里有一个演示内联元素如何被缩放变换处理的fiddle: https://jsfiddle.net/xxexjs72/

- Fletcher Bach