在 iPad 上使用移动 safari 使用 -webkit-transform 的缩放问题答案

【问题标题】：Scaling problem with -webkit-transform with mobile safari on iPad在 iPad 上使用移动 safari 使用 -webkit-transform 的缩放问题
【发布时间】：2010-09-17 11:03:45
【问题描述】：

在下面的 HTML 页面中，我正在使用 -webkit-transform 缩放一个块。变换将块从其初始大小缩放到其两倍大小。

这在 Safari 和 OSX 上的 Chrome 上可以正常工作。

但是，在 iPad（模拟器和设备）上，缩放从一个点开始，而不是从图像的原始大小开始。

正如您在示例中看到的那样，我设置了 viewport 元标记，但它什么也没做。

谁能确认这是一个错误，是否有解决方法？

<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0, minimum-scale=1.0" />

<style type="text/css">

#block {
    position:absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 400px;
    -webkit-transition: -webkit-transform 3s ease-out;
    background-color: blue;
  }

.zoom {
  -webkit-transform: scale(2);
}
</style>
</head>

<body>
  <div id="block" onclick="className='zoom';">The Block</div>
</body>
</html>

【问题讨论】：

标签： ipad webkit mobile-safari

【解决方案1】：

我自己解决了这个问题。

解决方案很简单：只需确保元素缩放到其原始大小即可：

-webkit-transform: scale(1);

不过，它有一个技巧。如果你像下面我一样，将一个类添加到由#id 选择的元素，#id 的优先级高于该类，除非你告诉浏览器它很重要，否则它不会显示

-webkit-transform: scale(2) !important;

解决此问题的另一种方法是不按#id 选择元素，而是按类（.block）或元素（div）选择元素。优先级低于 id 的任何内容。

解决方法如下：

<style type="text/css">

#block {
    position:absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 400px;
    -webkit-transition: -webkit-transform 3s ease-out;
    background-color: blue;
    -webkit-transform: scale(1);
  }

.zoom {
  -webkit-transform: scale(2) !important;
}
</style>
</head>

<body>
  <div id="block" onclick="className='zoom';">The Block</div>
</body>
</html>

【讨论】：

这有很大的不同，只需添加 scale(1)，谢谢先生！
正是我想要的。非常感谢。
对我来说，添加比例 1 不是解决方案，但我的开始和结束状态有一个转换，前面没有 -webkit。所以你的帖子帮助我解决了这个问题。

【解决方案2】：

我很晚才遇到这个问题。解决方案是不使用important，而是通过改变选择元素的方式。这是因为 ID 选择器比类选择器更接近和更强大。

#block.zoom {
  -webkit-transform: scale(2);
}

【讨论】：