Finally found the bug in a checkout flow after 3 late nights

I was working on an e-commerce site for a local shop in Austin. Everything worked fine on desktop but on mobile the checkout button would just vanish on the last step. I checked CSS, JavaScript, even the payment gateway. Turned out the error was a missing closing div tag that only broke on smaller screens. It took me about 8 hours spread over 3 days to figure it out. Has anyone else had a bug that only shows up on one device type?

2 comments

2 Comments

patricia_wright17d ago

Oh man, "a missing closing div tag that only broke on smaller screens" hits so close to home. I once spent an entire weekend hunting a bug where a menu would just stop working on iPad. You know what it was? I had one too many opening brackets in a CSS media query. Like an extra { that made the whole block invalid, but only on that specific screen width. Classic case of "works on my machine" but then you hard refresh on mobile and it just gives up. I swear these bugs are designed to make you question if you even know how to code at all.

faith_smith17d ago

Works on my machine" but then you hard refresh on mobile. Classic. I feel that in my bones, @patricia_wright. Did one last week where a button would only work on Chrome for Android. Firefox and Safari on iPhone? Dead. Three days later I found a missing event listener that only fired if the screen was exactly 375px wide. My Chrome dev tools were lying to me the whole time.