Scaling problem with -webkit-transform with mobile safari on iPad

问题

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>

回答1:

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);

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;

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:

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

回答2:

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.

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

来源：https://stackoverflow.com/questions/3734740/scaling-problem-with-webkit-transform-with-mobile-safari-on-ipad

标签

ipad

webkit

mobile-safari