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!

Some more articles for you

Coding

April 24, 2019

Outlook Debugging: Text Being Covered Around Aligned Table/Image

Outlook...yuck. I know, but today I want to talk about a peculiar issue involving text wrapping around an aligned image (nested in a table).

View post

Coding

December 16, 2022

Determine if a YouTube video is region locked using YouTube Data API v3

I needed to know if a YouTube video was region locked... so I went down the rabbit hole and learned how to use the YouTube Data API.

View post