iPad 上移动 safari 的 -webkit-transform 的缩放问题
在下面的 HTML 页面中，我使用 -webkit-transform 缩放块。该变换将块从其初始大小缩放为其双倍大小。
这在 OSX 上的 Safari 和 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>
In the HTML page below, I am scaling a block with a -webkit-transform. The transform scales the block from its initial size to its double size.
This works as expected with Safari, and Chrome on OSX.
But, on the IPad (both the simulator and the device), the scaling start from a single point instead of the original size of the image.
As you can see in the example I have set the viewport meta tag, but it does nothing.
Can anyone confirm this as a bug, and is there a workaround?
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我很晚才想到这个问题。解决方案是不使用
important，而是通过更改选择元素的方式。这是因为 ID 选择器比类选择器更接近、更强大。I came across this question very late. The solution was without using
important, and by changing the way of selecting an element. This is due to reason that ID selector is more closer and powerful than class selector.我自己设法解决了这个问题。
解决方案很简单：只需确保元素一开始就缩放到其原始大小：
不过，有一个技巧。如果您像下面一样，将一个类添加到 #id 选择的元素中，则 #id 的优先级高于该类，并且除非您告诉浏览器它很重要，否则它不会显示。
解决此问题的另一种方法是不这样做按 #id 但按类 (.block) 或按元素 (div) 选择元素。优先级低于 id 的任何内容。
解决方案如下：
I managed to solve the problem myself.
The solution is simple: just make sure the element is scaled to its original size to begin with:
There is one trick to it, though. If you, like I below, add a class to an element selected by #id, the #id has higher priority than the class and it will not show unless you tell the browser that it is important
An alternative way to solve this is to not select the element by #id but by class (.block) or by element (div). Anything with lower priority than an id.
Solution follows: