在 IOS webview 里面, 使用 JS 定时器修改 margin 或者 top,left 来实现动画, 或者 animation 实现动画,会影响 IOS 本机自带的复制功能。
解决方案: 用 CSS3 的 transform 则没有这个问题。
这个问题的原因不太清楚,猜测是 webview 的问题, 微信 webview 里面打开,则没有这个问题。
@keyframes jump {
0% {
margin-top: 0;
}
100% {
margin-top: -30px;
}
}
.view-money {
position: absolute;
top: 170px;
left: 50%;
width: 33px;
height: 33px;
transform: translateX(-105px);
animation: jump 1s ease 1s infinite alternate;
}
.view-chart {
position: absolute;
top: 210px;
left: 50%;
width: 31px;
height: 50px;
transform: translateX(110px);
animation: jump 1s ease infinite alternate;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
在 IOS 中 使用 animation 的情况下, jump 使用 margin-top , 或者 top 来实现动画, 会导致 IOS11 webview 中, 无法复制文字。 不太清除为什么。
解决方案:
@keyframes jump {
0% {
transform: translateX(-100px);
}
100% {
transform: translateX(-140px);
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
动画采用 translate 实现,复制功能就不受影响。