Hawk's By Design

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?

Example of CSS transition firing on page load

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!

Related Articles

Coding

November 8, 2018

Browser Plugins: AdBlock and User CSS

Browser plugins are quite amazing things and can do a variety of tasks. AdBlock and User CSS are two Google Chrome plugins that I've come to love for various reasons. If you want to optimize your web surfing experience, then this is the article for you!

View post

Coding

January 30, 2020

Rounded Button Links in Email Templates

Coding email templates can make you pull your hair out. What's worse? Trying to make a rounded button link work in Microsoft Outlook.

View post