Geek Answers Handbook

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

In the HTML page below, I scale the block with -webkit-transform. The conversion scales the block from its original size to its double size.

This works as expected with Safari and Chrome OSX.

But, on the iPad (both the simulator and the device), scaling starts from one point instead of the original image size.

As you can see in the example, I set the meta tag viewport, but it does nothing.

Can someone confirm this as an error, 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>
+5
source share
2 answers

I managed to solve the problem myself.

: , , :

-webkit-transform: scale(1);

. , , , #id, #id , , , , .

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

- #id, (.block) (div). , , .

:

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

. important . , ID , .

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

More articles:


All Articles