在iPad上使用移动Safari浏览器的-webkit转换缩放问题

在下面的HTML页面中，我使用-webkit-transform来缩放块。变换将块从其初始大小缩放到其双倍大小。在iPad上使用移动Safari浏览器的-webkit转换缩放问题

这与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>

来源

2010-09-17 andersjanmyr

我自己设法解决了这个问题。

解决方法很简单：只要确保元件缩放到原来的大小开始与：

-webkit-transform: scale(1);

有一个诀窍，虽然。如果你像我下面，添加一个类通过#ID选择的元素，在#ID比类具有更高的优先级，它不会出现，除非你告诉它是重要的

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

另一种浏览器解决这个问题的方法是不要通过#id而是通过class（.block）或者element（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>

来源

2010-09-20 09:01:55 andersjanmyr

这就产生了这样的差异，只是增加了比例（1），谢谢先生！ – 2013-06-10 09:07:43

正是我在找的东西。非常感谢。 – mapr 2014-10-11 03:27:22

对于我来说，添加scale 1并不是解决方案，但是我的开始和结束状态在它前面没有-webkit的转换。所以你的文章帮我弄清楚了这一点。 – Mattijs 2015-02-28 10:37:55

我碰到这个问题就非常晚。该解决方案没有使用important，并且通过改变选择元素的方式。这是由于ID选择器比类选择器更接近和更强大的缘故。

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

来源

2017-03-10 19:03:43

在iPad上使用移动Safari浏览器的-webkit转换缩放问题

回答

相关问题