SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    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 https://bugzilla.mozilla.org/ .

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <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 />

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,492
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by tonearm View Post
    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.

    Code:
    <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 />
    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.

    Cheers

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,492
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tonearm View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •