Stop CSS transition from firing on page load

Understand Chrome's form bug and the magic script

Chrome's quirky <form> elements are known to trigger CSS transitions upon page load due to a bug. The following workarounds are useful for dealing with these issues:

Chrome form bug - The Script Tag Magic

Adding a script tag with a single space at the very end of your body section can help tackle this issue effectively:

<!-- The magicians trick, the space script tag -->
<script> </script>


Resource Loading: The Correct Order

The order in which your stylesheets and scripts are loaded matters. To ensure that your styles are applied before any JavaScript is executed, load your CSS files before JavaScript files and even before the site's <title>. This optimizes the sequences in which your webpage's resources are loaded.

Manage CSS transitions with JavaScript

A simple JavaScript solution can help you manage when your CSS transitions are applied by adding a temporary no-transition class that is removed after the page has fully loaded.

// After it loads, let it flow!
window.onload = function(){
  document.body.classList.remove('no-transition');
};


/* Like Newton's first law, an element with 'no-transition'
will insist on stubbornly retaining its awesome property until acted upon by our script */
.no-transition * {
  transition: none !important;
}


Deeper dive: Advanced techniques and workarounds

The universal CSS selector approach

A universal selector (*) in your CSS is a swift albeit resource-heavy way of halting all transitions until the page completes loading:

// "None shall pass!" - Gandalf, probably
* {
  transition: none !important;
}


This can be handy for a quick stop to all transitions, but may not be the best long-term solution due to performance considerations.

Layout stability with Flexbox

Using Flexbox containers for your transition elements can provide a more consistent layout, reducing unexpected negative experiences.

Control transitions with CSS classes

During page initialization, you can add a CSS no-transition class. After the page is fully loaded, use JavaScript to remove this class and re-enable transitions:

// Abracadabra! Transitions enabled
$(document).ready(function() {
  $('.container').removeClass('no-transition');
});


Balanced performance with cross-browser stability

Cross-browser stability is critical. While the single-space script tag resolves a specific Chrome bug, it's vital to perform sufficient cross-browser testing. Also, always ensure your fixes do not adversely impact your website's performance.