Box-shadow rendering error in Firefox

Has anyone else seen rendering errors in Firefox when box-shadow is applied to an input button? Some of the shadow is sort of shifted. Scrolling the browser window so that the button hides and then reappears usually fixes it.

A link to your page so we can see the problem would be helpful.

If this is a known problem, you may find something in Bugzilla .

It looks like it’s actually a box-shadow plus border-radius problem. Here are the simplest terms of the code which trigger it. Load the page, scroll down so the button is above the fold, scroll back up, and you should see it. Be sure to use enough breaks so that the button can be scrolled completely above the fold on your screen.

<input style="box-shadow:.5em .5em .5em #000000; border-radius:.5em;" type="submit" value="Firefox Bug" />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

Do you have a screenshot of what you are seeing as I can’t see a real problem in Firefox PC. The bottom right corner is a little pixellated but doesn’t seem to change on scroll.

tonearm, I’m unable to duplicate the problem you’ve described, either. The code snippit doesn’t give us a very complete picture of your page. For example, does it have a valid doctype, are there other styles involved, are you indeed using an XHTML doctype, etc? If you can post a complete working example that demonstrates the problem, we’ll have a better chance of identifying the problem. Please click the link to our posting guidelines at the bottom of my message and post a complete page that demonstrates the problem… starts with <!doctype, ends with </html>. Help us help you.

I checked Bugzilla but only found one match for “box-shadow input” (without quotes) and a few reports when the search was for “box-shadow border-radius” but they didn’t sound like this issue.

My very first post in the SitePoint forums was about a Firefox bug, so you might have found a new one. :slight_smile:


I just updated Firefox from 17.0.9 to 24.1.1 and the problem seems to be gone. It had persisted through many updates previously. I’m sorry to bother everyone with this. I’m on Linux by the way.

No worries, I had a feeling it was an old version as early versions of Firefox were pretty rough with border-radius, box shadow and linear gradients.