The solution
box-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
You can use the background colour of your box as the box-shadow
colour if you feel this is too noticeable.
Alternatively, according to this answer on a similar issue in Chrome (thanks to Sebastian in the comments for the tip-off), you may want to try:
outline: 1px solid transparent;
What’s going on?
I’ve given a fairly lengthy explanation elsewhere, but here’s the short version. For performance reasons, WebKit only repaints those part of a page that it thinks might have changed. However, the iOS (pre-7) Safari implementation of border radius anti-aliases a few pixels beyond the calculated dimensions of a box. Since WebKit doesn’t know about these pixels, they don’t get redrawn; instead, they are left behind and build up on each animation frame.
The usual solution—as I suggested in my other answer—is to force that element to require hardware acceleration so that it gets painted as a separate layer. However, too many small elements or a few large ones will result in a lot of tiles getting pushed to the GPU, with obvious performance implications.
Using box-shadow
solves the problem more directly: it extends the repaint dimensions of the box, forcing WebKit to repaint the extra pixels. The known performance implications of box-shadow
in mobile browsers are directly related to the blur radius used, so a one pixel shadow should have little-to-no effect.