ios下animation计算rem错误

发表于

问题复现代码如下：

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
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="zh-CN" style="font-size:50px;">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <style>
    #outer {
      position: relative; border: 1px solid #000;
      height: 2rem;
    }
    #outer:before {
      content: ""; display: block; background: #eee;
      height: 32px;
    }
    #el {
      position: absolute; left: 0; top: 0; width: 100px; background: #999;
      animation-duration: 2s;
      animation-fill-mode: both;
      animation-name: test;
    }
    @keyframes test {
      0% {
        height: 0rem;
      }
      100% {
        height: 2rem;
      }
    }
  </style>
</head>
<body>
<div id="outer">
  <div id="el"></div>
</div>
</body>
</html>

1rem = 50px，在非ios环境下，表现正常；

而在ios下可以很明显地看到，#el 的动画最终height并没有达到预期的 2rem (100px)，而是只有32px。

经过多次调试，发现如果希望动画符合预期，必须在动画开始之前强制触发页面重排，或者在下一次事件循环时再让动画渲染。

1
2
3
4
5
6
<script>
document.documentElement.clientWidht;
</script>
<div id="outer">
  <div id="el"></div>
</div>

或者

1
2
3
4
5
6
7
8
9
10
11
<style>
#el {
  /* animation-name: test; */
}
</style>
...
<script>
setTimeout(function () {
  document.querySelector('#el').style.animationName = 'test';
});
</script>

暂时没有查到相关文档。

补充：
QQ浏览器下出现的计算错误比为 1rem = 16px；
在ios safari以及微信内嵌浏览器下，计算错误比例 1rem == 1px；
而支付宝内嵌浏览器表现正常。