html - 同时改变 parent 和 child 的 flex 会触发闪烁

Question

我有这个结构:

<div id="app">
  <div class="document-reader-root">
    <div class="left-bar">
       Left bar
    </div>

    <div class="content">
      Content
    </div>
  </div>
  
  <div class="right-bar">
    Right bar
  </div>
</div>

单击按钮后，我正在更改 left-bar 的 flex 大小。和 content但这会触发内容的小幅移动。很难用语言来解释，所以我创建了一个 jsfiddle来证明它。仅供引用，我无法更改 div 的结构。
关于如何防止这种情况的任何想法？
谢谢!

Answer 1

我认为您遇到的问题是您正在为不属于每秒 60 帧 (FPS) 规范的 CSS 属性设置动画。当你为这些属性设置动画时，你会得到抖动/闪烁。
具有黄油般平滑 60FPS 的属性是 transform和 opacity .属性如 flex , margin , top众所周知，动画时容易闪烁。
您可以在此处阅读更多相关信息:Animation performance and frame rate .与您的问题相关的部分在“CSS 属性成本”下
注:尽管 Firefox 也使用此规范，即使在 60fps 时，由于子像素渲染问题，动画有时也容易闪烁(虽然这不是导致您出现问题的原因 - Firefox sub-pixel rendering bug，但了解起来很方便)。