iPad上使用移动版Safari的-webkit-transform存在缩放问题

Question

iPad上使用移动版Safari的-webkit-transform存在缩放问题

ipadwebkitmobile-safari

5

在下面的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>

- andersjanmyr

2个回答

-1

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

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

- Vishal Kumar Sahu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- andersjanmyr · Accepted Answer

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

解决方法很简单：只需确保元素最初的大小已经被缩放到其原始大小即可：

-webkit-transform: scale(1);

不过这里有一个小技巧。如果你像我一样，给一个被选中的id元素添加了class类，那么该#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>