在iPad上使用移动Safari进行-webkit-transform缩放问题 [英] Scaling problem with -webkit-transform with mobile safari on iPad
问题描述
在下面的HTML页面中，我使用 -webkit-transform 缩放块。变换将块从其初始大小缩放到双倍大小。
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.
这与Safari和OS上的Chrome一样正常。
This works as expected with Safari, and Chrome on OSX.
但是，在IPad（模拟器和设备）上，缩放从单个点开始，而不是从图像的原始大小开始。
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.
正如您在示例中所看到的，我设置了 viewport 元标记，但它什么也没做。
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>
推荐答案
我自己设法解决了这个问题。
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:
-webkit-transform: scale(1);
但有一个技巧。如果您（如下所示）向#id选择的元素添加一个类，则#id的优先级高于类，除非您告诉浏览器它是重要的，否则它不会显示
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
-webkit-transform: scale(2) !important;
解决此问题的另一种方法是不按#id选择元素，而是按类（.block）选择元素）或元素（div）。优先级低于id的任何东西。
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.
解决方案如下：
<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>
这篇关于在iPad上使用移动Safari进行-webkit-transform缩放问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
