Flickering 2D transform elements in Chrome: a simple fix

-
This quick post is to point out a fix to an issue I had to deal with a few weeks ago and was caused by a Chrome update. Components with absolute positioning and a 2D CSS transform started flickering when placed inside a scrollable component. A brief search online revealed several people with similar problems, but the suggested fixes were all very different. I tested several of them (including obvious changes to the z order) before finding the one that actually did the trick.

What eventually worked for me was adding an empty 3D transform to the same elements with 2D transforms:

transform:translate3d(0,0,0);

I guess the reason why this works is that it forces elements to be drawn via a different rendering / compositing path than standard 2D elements.

Comments

Deepthi said…
Wonderful Blog!!! Your post is very informative about the latest technology. Thank you for sharing the article with us.
aws Training in Bangalore
python Training in Bangalore
hadoop Training in Bangalore
angular js Training in Bangalore
bigdata analytics Training in Bangalore
October 10, 2019 at 3:49 AM
Kale Co Jakim said…
Modern browser optimization techniques, CSS rendering pipelines, and responsive user interfaces are important aspects of Web Development Projects. Understanding how browsers handle transformations, animations, and hardware acceleration enables developers to create smoother and more efficient web applications that provide an improved user experience across different devices and browsers.
June 24, 2026 at 11:22 AM
Kale Co Jakim said…
As front-end technologies continue to evolve, exploring NextJS Projects can help students and developers build high-performance web applications with optimized rendering, modern UI architectures, and seamless client-side interactions. These projects offer valuable experience in creating scalable and responsive applications using the latest web development practices.
June 24, 2026 at 11:22 AM
dean said…
This article presents a concise and practical solution to a Chrome rendering issue involving absolutely positioned elements with 2D CSS transforms inside scrollable components. The troubleshooting process is useful because the author tested several suggested solutions, including z-order changes, before identifying the fix that actually resolved the flickering.

The solution of adding an empty 3D transform, transform: translate3d(0,0,0);, is particularly interesting because it can force affected elements through a different rendering or compositing path. Understanding how CSS transforms interact with browser rendering is an important part of HTML CSS JavaScript Training.
August 24, 2026 at 11:23 PM
dean said…
The article also demonstrates an important frontend debugging lesson: browser updates can introduce rendering behavior that affects previously working interfaces. Developers need to investigate the specific interaction between positioning, transforms, scrolling, and compositing instead of assuming that common CSS changes will resolve every visual problem. These skills are useful in a Web Development Course.
August 24, 2026 at 11:23 PM
Post a Comment

Popular posts from this blog

Website Update: Atomz

-
A new section has been added to the website: 24Hour Games The 24H Games project is an experiment in gameplay design and developement. Its main objective is the creation of simple web-based games in   a single day . Each of the games presented here has been built by a single developer (that is, me ^-^) in just 24 hours. Each game is presented along with its   developement log , describing the various steps in the creation of the games, things that worked and things that didn't. The first published game is called Atomz . In this puzzle game the player links moving symbols (thr atomz) by matching shape or color, before they go out of the screen. Linked atomz switch their state, linking them in a smart way to create bigger molecules increases the score. Enter the 24Hour Games project page to play the game and read the developement log!
Read more

glVertexAttribPointer and double precision buffers

-
Image
This post will hopefully help people avoid a mistake that cost me several hours of debugging. In one of my projects I have been working with OpenGL 4 double precision vertex buffers. As the buffer data was passed to the shader as a generic attribute, I have been using  glVertexAttribPointer  to specify the attribute location in the data stream. This worked fine with floating point data. When I needed to switch to double precision, I checked the glVertexAttribPointer specification: this function accepts GL_DOUBLE as an input type: therefore, I assumed that change was all I needed to pass double precision data to my shader. I noticed two other version of the attrib pointer function existed ( glVertexAttribIPointer and  glVertexAttribLPointer ) but I thought they were just legacy functions or alternatives to using glVertexAttribPointer with GL_DOUBLE or GL_INT type specifiers. Things did not work as I expected. trying to pass double precision data to the shader cau...
Read more