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

ipad webkit mobile-safari

22,173

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>

22,173

Author by

John Maloney

Updated on September 05, 2021

Comments

John Maloney over 2 years

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>

Ben Taliadoros almost 11 years

This made such a difference, simply adding scale(1), thank you sir!
kaoscify over 9 years

Just what I was looking for. Thanks so much.
Mattijs about 9 years

for me adding scale 1 was not the solution but my start and end state had a transform without -webkit in front of it. So your post helped me figure this out.