CSS 'transform: scale()' 属性在 iOS Safari 和 iOS Chrome 上也不起作用

Posted 2023-03-12

【中文标题】CSS \'transform: scale()\' 属性在 iOS Safari 和 iOS Chrome 上也不起作用

【英文标题】：CSS 'transform: scale()' property doesn't work on iOS Safari and iOS Chrome tooCSS 'transform: scale()' 属性在 iOS Safari 和 iOS Chrome 上也不起作用

【发布时间】：2016-02-28 14:48:24

【问题描述】：

我在我的网站上使用 css 动画，但它在基于 ios 的 Safari 和 Chrome 中不起作用。

html：

...
<p>
   <a href="mywebsite.hu/something1.php">
      <img src="picture1.jpg" class="kep" >
   </a>
   <a href="mywebsite.hu/something2.php">
      <img src="picture2.jpg" class="kep" >
   </a>
   <a href="mywebsite.hu/something3.php">
      <img src="picture3.jpg" class="kep" >
   </a>
</p>
...

CSS：

img.kep
   transition: transform.1s linear;
   -moz-transition: transform.1s linear;
   -webkit-transition: transform.1s linear;

img.kep:hover
   transform: scale(1.04);
   -ms-transform: scale(1.04);
   -moz-transform: scale(1.04);
   -webkit-transform: scale(1.04);

它适用于 windows（IE、Mozilla、Chrome、Opera、Vivaldi、Safari）、android（Chrome，默认三星 Galaxy 浏览器）。 但是在带有 iOS 9.2.1(Safari, Chrome) 的 iPad2 中不起作用！

为什么？

【参考方案1】：

首先，您应该始终将非前缀属性包含在列表的最后。 transition 和 transform 应低于所有前缀版本。

因此，如果它受支持，就会使用它，而不是潜在的旧前缀版本。

其次，您只是在转换transform。所以-webkit-transform 不会被改变。你最好只转换all

第三，transform 和 .1s 之间没有空格。应该是空格。

【讨论】：

所以我用这个 --> img.kep -webkit-transition: -webkit-transform 1s linear; -moz-transition：-moz-transform 1s 线性；过渡：-ms-transform 1s 线性；过渡：变换1s线性； 或者这个 --> img.kep -webkit-transition: -webkit-transform 1s linear; -moz-transition：-moz-transform 1s 线性； -ms-transition：-ms-transform 1s 线性；过渡：变换1s线性； 还是别的什么？

过渡：全1s线性；

你有示例链接我可以自己试试吗？

啊，当然。这是因为您在一个默认情况下通常没有的元素上触发了悬停事件。 iOS 可能不确定该怎么做。我可能会尝试添加 :focus 和 :hover。如果这不起作用，您可以尝试将动画转移到父 <a> 标记上。那应该解决它。虽然在 iOS 上感觉不太一样，因为你无法悬停。此外，根据您在单击 <a> 时计划执行的操作，您可能看不到悬停。

非常感谢 :) 现在有时可以在 iOS Safari 和 Chrome 上工作 :D