Last night I was working on a new small project.
I made a button that, when clicked, triggered a menu to open up with a nice little transition utilizing opacity and transforms. Pretty standard stuff, right?
TL;DR: It’s a Google Chrome bug. Add a script tag to your page and it solves the issue
The Problem
Well, after making some further updates and refreshing the page, I noticed that the transition was firing on page load. What I mean by this is instead of being hidden on page load, as they should be, the elements were visible and would transition to their hidden state.
Naturally, my first thought is that I accidentally set them to be in their visible state first. Maybe I just messed up somewhere in the CSS. It happens, right?
Well, I didn’t mess up. The elements were supposed to be hidden by default. So why the hell was the transition happening on load?
The Solution
Turns out, it’s a bug in Google Chrome. Go figure, right?
The bug happens whenever you don’t have any script tags on the page, apparently. For whatever reason, this causes css transitions to trigger upon page load. While I was also digging, it appears that this happens sometimes with the form tag as well. What a weird bug!
The solution is to include a script tag in your page. Whenever I found the solution, they said to include a space in the script tag, but I found that it works fine even without the space.
<script></script>
Twenty minutes of me putting my CSS under the microscope…and it turned out to be an obscure Chrome bug. Just my luck.
You can follow the bug reports for “on DOM ready” and “form has three or more inputs”. Here is also a fun little page showing the bug.
Conclusion
Sometimes you can do everything right in your code, and things still don’t turn out the way you expected. It’s funny that my immediate reaction was that I probably messed something up somewhere along the line.
I guess that’s not a bad reaction…
As a Lynda.com video once said, “…experienced programmers never expect their code to work on the first try.”
Hope this helps someone out there!