Today I was faced with a bug regarding content behaving oddly within an overflowed div. I already knew that Android doesn’t play nicely with overflow: auto, a debacle that has yet to be resolved for two years now. But it was set at overflow: scroll, and I had never seen this behavior – content jittering left and right as you scrolled, and popping out at the top beyond the overflow area. There also seems to be a performance hit with CSS elements like shadows, gradients, and rounded corners on Android. However, regardless of the odd behavior, my scrolling felt pretty snappy. So what could the issue be?
Turns out, Android just hates box shadows on overflowed elements.
As soon as I removed the -webkit-box-shadow from my CSS, everything worked just fine. I’ve constructed a demo of two divs, styled exactly the same, but one with a box shadow. If you have an Android device, you can take a look at the demo here. If you don’t have a device running Android, here’s a screenshot of what it looks like:
Too much space at the bottom, jerky movement to the left, and content spilling out at the top. Yuck yuck yuck.
I can’t fathom why these two styles would conflict and cause such a dramatic issue. I couldn’t find any information about this bug elsewhere, so I logged a bug with Android about it. Hopefully this will help someone experiencing this bug in the future.