发表新帖

发表新帖

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

后端未结

关注

 2  988

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 a

相关标签:

2条回答

野性不改

2021-02-10 10:31
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);
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
南笙

2021-02-10 10:32
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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

热议问题