Changing flex from parent and child at the same time triggers a flickering

user_2734665 0
Viewed 110

I have this structure:

<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>

And after a click on a button, I'm changing the flex size of the left-bar and content but this triggers a small movement of the content. It's hard to explain it in words so I created a jsfiddle to demonstrate it. FYI, I can't change the structure of the divs.

Any ideas on how to prevent this?

Thanks!

flexbox css-transitions css html
2 Answers

I think the problem you have is that you are animating CSS properties that don't fall under the 60 frames-per-second (FPS) specification. When you animate such properties you get jitter / flickering.

Properties that have buttery smooth 60FPS are transform and opacity. Properties such as flex, margin, top etc are known to be prone to flicker when animated.

You can read more about it here: Animation performance and frame rate. The section related to your problem is under 'CSS property cost'

Note: although Firefox also uses this specficiation, even at 60fps, animations are sometimes prone to flicker due to sub-pixel rendering issues (this isn't what is causing your problem though - Firefox sub-pixel rendering bug, but it is handy to know).

user_52197610

You could try changing the content size when the sidebars get hidden away

.doc-content {
   transition: max-width 0.5s ease-in-out;
}

.hide-panels {
  .doc-content {
    max-width: 250px;
  }
}

Changing the max-width makes the flickering go away

user_55467420
Related