Adjusting both the parent and child flex simultaneously can induce a flicker effect

I have the following layout:

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

After clicking a button, I adjust the flex size of the left-bar and content. However, this adjustment causes a slight movement in the content. To better illustrate the issue, I have created a jsfiddle demo. Please note that I am unable to modify the structure of the divs.

Any suggestions on how to prevent this movement?

Thank you!

htmlcssflexboxcss-transitions

Answer №1

One common issue in CSS animations is animating properties that don't adhere to the 60 frames-per-second (FPS) standard, leading to jitter and flickering effects.

For smoother animations, stick to using transform and opacity, which typically run at 60FPS. Properties like flex, margin, and top are more prone to flicker when animated.

To learn more about this topic, check out: Animation performance and frame rate. Look for the 'CSS property cost' section for insights into your specific issue.

Keep in mind: Even with Firefox following the same specification for smooth animation at 60fps, there might still be occasional flickering due to sub-pixel rendering problems. This could be a separate issue from the one you are facing - read more about it here: Firefox sub-pixel rendering bug.

Answer №2

One suggestion would be to adjust the size of the content when the sidebars are hidden

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

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

By modifying the max-width, you can eliminate the flickering effect

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting up CSS module class names in a Vue project using Vite js configuration

Within my vite.config.ts file, I have specified a configuration for CSS modules. return defineConfig({ ... css: { ... modules: { localsConvention: "camelCase", generateScopedName: "[name]__[local]__[hash:base64:2]" ...

cssvue.jsvuejs3vitecss-modules

Retrieve the secret input by clicking on the text field

Looking for some guidance on how to accomplish this task... I've searched extensively but haven't been able to find a solution. If anyone could lend a hand, I'd greatly appreciate it. Here's the code snippet I'm working with: &l ...

javascriptjqueryhtmlcss

Switch the color of the final letter

Sample code snippet: <p class="test">string</p> Looking to dynamically change the color of the last letter, specifically the letter "g", using CSS only, without relying on JavaScript. I am displaying the string character by character and nee ...

htmlcss

Is there a disparity in how the mandatory field validator functions in Edge compared to Chrome?

https://i.sstatic.net/qUzDN.pngThere doesn't seem to be any red color https://i.sstatic.net/EqHyW.png How can I ensure consistency? Both elements should either have color or none at all. <form action=""> <input id="email" type="email ...

htmlcssmicrosoft-edge

Is there a more intelligent approach to incorporating Bootstrap classes (or classes from another less.css file) into my less file through inheritance?

I am trying to find a more efficient way to integrate bootstrap classes into my less file. Currently, I am doing the following, but it has the disadvantage that not every "subclass" or connected class is inherited for my own control: .BWForm_form-control ...

csstwitter-bootstrap-3visual-studio-2013less

What is the best way to set the keyframes CSS value for an element to 0%?

Would like to create a progress indicator div using CSS animations? Check out the JSBin link provided. The desired behavior is to have the div width increase from 30% to 100% when the user clicks on stage3 after stage1, rather than starting from 0%. Althou ...

javascriptcsshtmlcss-animations

Is there a way to extract JavaScript text for translation in Poedit?

After successfully using "GNU gettext" with PHP and extracting the PO file format with poedit, I attempted to do the same for my javascript within an HTML "script" tag. However, it did not work as expected and there was no visible support for javascript. ...

javascripthtmlgettextphp-gettext

Dynamically loading various compositions of EDGE

I'm currently working on developing a testing system for edge-animate compositions. The goal is to be able to load different compositions and verify that they are displaying correctly, as well as make changes to their customizable fields. I attempted ...

javascripthtmladobe-edge

Tips for convincing the React/MUI Theme Engine to apply namespaces to all MUI CSS rules?

Encountering an issue with React Apps imported as microfrontends. Our Landingpage (built in React/MUI) imports multiple Apps (created in React/MUI v4 or v5, designed to run independently with their own themes). The problem arises when each App creates its ...

cssreactjsmaterial-uithemes

Exploring the versatility of Angular 4 by implementing a switch feature with

My goal is to have the menu change based on the click of the "Cadastros" action, but it seems like the issue lies with the "workspaceSelected" property not being visible to all components. I believe the best approach in this situation would be to have the ...

htmlangulartypescript

Troubleshooting a malfunctioning PHP script that verifies user ranks

I wrote a PHP script to determine the user's rank and grant access to view specific content based on that rank. Unfortunately, the script is not functioning as intended. Regardless of the user's rank, the content is still displayed. Here is the ...

phphtmlmysql

Issues with HTML5 file uploads causing delays in iOS Safari mobile browsers

I developed a simple HTML5 file upload script using $.ajax(). I also attempted to use xhr, but encountered the same issue. The script successfully uploads an image to imgur.com and works flawlessly on desktop browsers as well as iOS Safari. However, in iOS ...

ajaxhtmlfile-uploadmobile-safari

connecting checkbox elements to another and distinguishing between them during publication

Below are three checkbox tags each representing a different category: <input type="checkbox" name="catpref[]" value=1> Politics<br> <input type="checkbox" name="catpref[]" value=2> Sports<br> <input type="checkbox" name="catpref ...

phphtml

Is there a way to display a delivery estimate underneath the product title on a WooCommerce website?

How can I display Estimated delivery days below the product title to inform my customers about their order's arrival date, similar to the example on the page included in the link? I would like it to show varying days depending on the shipping class. ...

phpcsswordpresswoocommerceproduct

Is it possible to pass the index variable of a for loop to a different function?

As a current bootcamp student, I have a question about passing the index of a for loop to another function. Specifically, I am trying to fetch data from an API (which provides me with a random cryptocurrency from an array) 4 times and then pass that data ...

javascripthtmlfor-loopindexing

List of recommended countries with their respective flags and descriptive text

I am currently working on creating a country suggestion list that includes flags next to the selected result. While I have been successful in generating the suggestion box based on the country names, I am looking to enhance it by displaying the respective ...

javascriptjqueryhtmljquery-ui

How can I show express-validator errors in Angular application?

Struggling to integrate the express-validator with angularjs and html in order to show validation errors, but encountering difficulties accessing the errors variable. Check out the code snippet below. routes.js router.post('/register', functio ...

javascripthtmlangularjsnode.jsexpress

What could be causing the Contact anchor element to not function properly?

I've been working on creating a dropdown menu for my API, but I'm having trouble getting the anchor links to function properly. I even attempted changing the "a" element to an onclick call with javascript:void(0) and added a function to open Gmai ...

javascripthtmlcssdrop-down-menudropdown

Obtaining the HTML code for the second paragraph on an iOS device

I am developing an app that extracts text from a website. Here is the code I have so far: - (void)viewDidLoad { [super viewDidLoad]; NSURL *URL = [NSURL URLWithString:@"http://rss.cnn.com"]; NSData *data = [NSData dataWithContentsOfURL:URL]; ...

htmliosobjective-cparagraphnsscanner

What is the process for modifying two IDs simultaneously?

I'm struggling to include more than one ID in my CSS. I want the box border to have four different hover effects and three gradient buttons (e.g., play, pictures, etc.). Here is my HTML: <h2><a id="hover-1" href="">Hov ...

htmlcss