Watch out for element transformations causing CSS to flicker

This is part of the Semicolon&Sons Code Diary - consisting of lessons learned on the job. You're in the CSS-and-design category.

Last Updated: 2024-11-23

There was a flickering effect of CSS on a webpage of Project P. Some images would resize after about 1 second in and we couldn't figure out why because the CSS looked perfect.

Ultimately the issue was because some elements started off as img elements (and becaseu they had no CSS style associated with them in that form, they therefore defaulted to 100% width). THen then, due to some JS, these img elements were converted to svg elements (which were styled to be 50% max-width). This transition caused the flickering effect.