Conflict issues and solutions between the fixed positioning property and animations in CSS

1. Problem#

In CSS, using animation properties conflicts with the fixed property under the same tag, causing the positioning to fail. So how can we solve this?

2. Analysis#

Let me briefly explain the background of the problem. Last night, I wanted to add a simple animation to my blog page, where the content gradually appears from the bottom to the top when the browser is refreshed. The code is as follows:

/* index-container is the main part of the page */
.index-container {
	opacity: 0;
	animation-name: index;
	animation-duration: 0.7s;
	animation-fill-mode: forwards;
}

/* A simple animation implementation */
@keyframes index {
	0% {
		transform: translateY(100px);
		opacity: 0;
}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

After running it, I found that the animation displayed well, but when I was browsing the article details, I found that the fixed positioning of the table of contents was not working.

According to the original settings, when the page is scrolled down, the table of contents should stick to the top of the browser for easy navigation and viewing. But now it can't stick anymore. Checking the browser settings, the property does take effect, but the page doesn't show the desired result.

Previously, when I wrote the fixed positioning event for the table of contents, I used the scroll event. Then yesterday, when I wrote the animation, I bound it to the onload event. I initially suspected that there was a conflict between the two windows, causing the second one to fail. So I tried a different approach, using the addEventListener event listener to execute them. But no matter how I wrote it, the fixed positioning of the table of contents still didn't work.

I stayed up too late last night, so I left it there and didn't bother with it. This morning, I went to Zhang Xinxu's website and found that there is indeed such a problem.

Reference article: https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/

But the article only introduces the cause of the problem and does not provide a clear solution.

3. Solution#

Although there is no explicit solution, it gave me an idea. Because some properties in the animation, such as scale and translate, will cause the container's width and height to be recalculated, while the fixed property relies on a specified pixel value. So when the animation is executed, the height of the page changes, and the fixed property cannot perform its task properly.

Now that the reason has been found, the solution naturally emerges. Take a look at the diagram (the diagram is ugly, hand-drawn, just understand the meaning)

This is my initial layout. I bound the animation to the container of the red box, and the table of contents is inside the red box, so it fails.

Now I rearrange it,

The table of contents is still on the side, but I separated it from the usual sidebar into two containers. Now I bind the animation to the main part and sidebar, so the table of contents is separated from the tag with the animation.

After testing on the page again, I found no problems at all. The animation effect and the fixed positioning of the table of contents do not interfere with each other.

I'm very happy and can happily tinker with it again!