transform position 之间的影响？

Question

https://play.vuejs.org/#eNp1UEFOwzAQ/MrKSAgOJEaoEjKhEt9AuaS2S...
这是代码地址可以看到异常效果，将 position: relative; 注释就正常了，这是什么原因呢？有什么方法可以解决吗？
// 谷歌浏览器

Answer 1

发生了重绘

没有定位时没有重绘:

这个是relative的副作用, 上方的元素旋转, 元素位置改变进行重绘, 下方元素用的相对定位, 上方位置改变使下方的也改变进行了重绘, 就有了闪一下的现象

Answer 2

先说明，我并不清楚这是为什么，就说一下我所观察到的情况。

首先，我确实没有复现成功，哪怕是这个问题所提供的链接也不行，后续验证进一步发现，这居然还有系统差异的原因，我在 Window 系统中看到了闪烁的效果，但 Mac 上确实没有。

其次，就算是在 Window 上，火狐也是可以正常表现的，而复现闪烁效果使用的是 Edge，这大概率是内核的问题。

楼上所说的重绘我不能完全信服，如何解释其他环境和其它浏览器的不同表现呢，而这个「不同」才是符合正常的表现。

还有一点，所提供代码使用了嵌套选择器语法，并且没有使用预处理器。这是新版本加入的语法支持，问题不大，并且拆解成经典写法也是同样的表现。不过它的存在，确实让我进一步怀疑了内核，可这样又得解释操作系统的不同表现。

Firefox for Mac 未测试，表现未知。

Answer 3

谷歌浏览器的问题，可在body上添加css属性进行解决-webkit-backface-visibility: hidden;，这个css属性是不显示旋转元素的背面