Menu
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>
973
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With