The one CSS animation that broke my ENTIRE checkout form

I spent 2 hours on Friday trying to figure out why my checkout button was invisible on mobile. Turns out a hover animation on a completely different div was clipping my button offscreen at exactly 768px width. Has anyone else had a random animation rule mess up something totally unrelated like this?

3 comments

3 Comments

lucas97210d ago

Just add overflow visible to the parent container and that usually fixes it.

ivancoleman10d ago

The_terry hit on something REAL there. I've had overflow visible absolutely DESTROY a layout on a project where I just needed a dropdown to show over a container. Suddenly half the page was shifting around like a broken carnival ride on mobile. It's funny how the "easy fix" always ends up causing three new problems, right? I swear every time I think "oh this will just be a quick overflow visible" I end up spending the next two hours debugging some random float or margin collapse. Clearfix is ugly but at LEAST it does what it says on the tin without breaking everything else.

the_terry10d ago

Overflow visible can sometimes mess with the layout in unexpected ways though, especially if you have things like borders or padding that get ignored. Idk, maybe it's just me but I've had to switch to a clearfix approach on some projects because visible made things look broken on mobile.