Scroll based animations cause significant performance problems

168
195
Joined
Dec 7, 2016
There is an issue with "p-sidebar-inner", the sidebar to the right of comments. I see that "is_stuck" is being added at a certain scroll position, and "position: fixed" and a variable "top:" number is being applied. This doesn't work and the the sidebar is moving all around. It would work better if you added "position: sticky" and "top: 100px", and remove the javascript that is making the top vary with scroll.

Another issue is the NIKETALK logo animation. The problem is that padding is being animated. Padding, along with margin, width, height, top, etc, should not be animated because each frame is redrawn, making the browser to work a lot harder, and which is why it doesn't look at smooth as it could be. To animate something, use the the "transform" property.

I think it would be better to just have NIKETALK in its smaller version and not have it animate at all. It's a little bit overkill to see that every time.

I noticed these problems because my fans were going nuts just from looking at a webpage. Having multiple instances of non-hardware-accelerated animation properties is usually the culprit.
 
Back
Top Bottom