Suppressing CSS Transition Initiation on Page Load

In certain situations, CSS transitions may activate inadvertently during page load, causing elements to flicker. This issue can arise when applying color transitions on elements.

As per the example provided:

CSS:

p.green {
   color: green;
   transition: color .2s;
}

p.green:hover {
   color: yellow;
}

HTML:

<p class="green">The Flashing Text</p>

Upon page load, the text within the

element transitions from black (the initial color) to green. This behavior is unwanted and can be visually disruptive.

To prevent this unintended transition, a solution involves leveraging a unique aspect of Chrome's behavior. When a page contains a

<script> </script>

This simple workaround addresses the bug in Chrome by providing a blank