Closed Bug 446693 Opened 16 years ago Closed 14 years ago

-moz-box-shadow and text-shadow causing scrollbars

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED FIXED
Milestone:
mozilla2.0b7
Tracking Flags:
Tracking Status
blocking2.0 --- betaN+

People

(Reporter: martijn.martijn, Assigned: dbaron)

References

(Blocks 1 open bug)

Details

(Keywords: testcase)

Attachments

(4 files)

testcase1
223 bytes, text/html
Details
testcase2
356 bytes, text/html
Details
testcase3
373 bytes, text/html
Details
testcase4
366 bytes, text/html
Details
Attached file testcase1 — 
Are they supposed to do that?
I would not think so, but perhaps I'm wrong.
Attached file testcase2 — 

    
    

    
  

      
      
      
      

        Attached file
          
        testcase3
        — 
      

    


  

    
    

    
  
Do CSS outlines cause the same problem? I'm guessing its because Gecko takes the overflow rect into account when calculating scrollbars, in which case its a generic problem and not a problem with the shadow properties.

    
    

    
  
Yes, see bug 286368.
I noticed that Opera9.50 (for text-shadow) and Safari (for box-shadow and text-shadow) do the same as Firefox here, so I guess this might be invalid.
But it really strikes me as an unwanted side-effect.

    
    

    
  
WebKit and Opera 9.5 behave the same as Minefield on this (Opera, obviously, only for text-shadow, WebKit with -webkit-box-shadow).

test case 3 acts slightly differently:
Minefield: large vertical and horizontal scrollbar
WebKit: no scrollbar
Opera: only a horizontal scrollbar


    
  
Depends on: 286368

    
    

    
  
I've just added #content { -moz-box-shadow: 0 0 4px #acacac; } to the MediaWiki's Monobook.css on a wiki, and had to use { -moz-box-shadow: -3px 0 3px #cfcfcf; } instead (as a workaround), but, obviously, the shadow is now several times thicker on the left side of the box then on the top or bottom.

Can anyone think of a better workaround?

    
    

    
  

      
      
      
      

        Attached file
          
        testcase4
        — 
      

    


  
When applying a blurred shadow with offset 0 0 to a box that touches the right or lower edge of the body, scrollbars appear, if box touches upper and left edge, they do not. (use Firebug to set display:none; for lower right box)

    
    

    
  
It's the same for me on Linux for both box and text shadows. I use the latest firefox 4 beta.
I added
-webkit-box-shadow:0 0 50px #000;
box-shadow:0 0 50px #000;

to Lukas' code : Opera act the same as minefield though it doesn't render the shadow until it's minimized and then restored.
WebKit/chromium doesn't add scrollbars (but the shadow is not nice)

    
  
OS: Windows XP → All
Hardware: x86 → All

    
    

    
  
FF 3.6.8 causes scrollbars on this code:

<body style="width:100%">
<div style="width:100%; -moz-box-shadow: 0px 1px 500px #fff; background-color: green;">Test</div>
</body>

while it supposed to create a vertical shadow. By the way Chrome 6.0.472.0 does not have this problem (with -webkit-box-shadow instead of -moz-box-shadow of course).

    
    

    
  
FWIW, meanwhile the spec is clear about this issue:

"Shadows do not trigger scrolling or increase the size of the scrollable area"
http://www.w3.org/TR/css3-background/#the-box-shadow

This should block dropping -moz-prefix (bug 590039)
Blocks: 590039

    
    

    
  
I don't agree that this should block dropping the prefix. Are there any cases where authors are deliberately using box-shadow and not -moz-box-shadow to get around this bug?

    
    

    
  
(In reply to comment #19)
> I don't agree that this should block dropping the prefix. Are there any cases
> where authors are deliberately using box-shadow and not -moz-box-shadow to get
> around this bug?

Hmm. A couple of times I've done some weirdo things with -moz-box-shadow: using a negative spread to try to at least minimise the scrollbar as much as possible.

like this:
div {
-moz-box-shadow: 0 10px 10px -10px rgba(10,10,10,.7); /* not really the look I want */
-webkit-box-shadow: 0 3px 3px rgba(10,10,10,.5);
box-shadow: 0 3px 3px rgba(10,10,10,.5);
}

Afaik, IE 9 doesn't trigger a scrollbar (but I can't test, thing doesn't run on XP). Webkit still needs the prefix.

    
    

    
  
(In reply to comment #19)
> Are there any cases where authors are deliberately using box-shadow and 
> not -moz-box-shadow to get around this bug?

IE9 will likely ship without bug and without prefix, so in near future, yes.
Chrome 5 works as expected with the (modified) testcases here. They are known to be fast in dropping their -webkit-
dropped:  https://bugs.webkit.org/show_bug.cgi?id=27581
readded:  https://bugs.webkit.org/show_bug.cgi?id=29927

There might be cases were authors don't use box-shadow at all and use there  approved methods (background-images in surrounding divs).
Or they use it and are frustrated by Gecko's results.

    
    

    
  
I agree with j.j. It is entirely reasonable that someone would purposefully not declare the flawed -moz-box-shadow while declaring box-shadow with the understanding that manufacturer prefixes are used to ensure the final property is implemented with cross-browser constancy.

Removing the -moz- prefix would force designers who want to implement box-shadow to wrap 100% width elements in non-semantic elements with overflow:hidden.  If they want to do this and declare -moz-box-shadow, that is their prerogative. But I think it would be rather inconsiderate for Mozilla to release a version of Firefox with the -moz- prefix dropped on a knowingly flawed property that will introduce cross-browser inconsistency.

    
    

    
  
I'm inclined to think that this does block shipping box-shadow without a prefix, and therefore, that we want it in beta6.
Assignee: nobody → dbaron
blocking2.0: --- → beta6+
blocking2.0: beta6+ → betaN+
Whiteboard: [all patches will go in bug 542595]
Whiteboard: [all patches will go in bug 542595] → [patches are in bug 542595]

    
    

    
  
As a web developer, please don't ship with a non prefixed box-shadow and this bug.

Opera is already doing it (And even worse as a purely bottom shadow - 0px 10px - without blur still create an horizontal scrollbar)

The current situation render -moz-box-shadow useless in some edge cases but at least it could be disabled just by removing the statement, the page don't get a drop shadow in firefox but at least it doesn't look as strange as getting a scroll bar for no reason.

    
    

    
  
Fixed by bug 542595.

Please note that the fix is NOT in beta 7.
Status: NEW → RESOLVED
Closed: 14 years ago
Resolution: --- → FIXED
Whiteboard: [patches are in bug 542595]
Target Milestone: --- → mozilla2.0b8

    
  
Target Milestone: mozilla2.0b8 → mozilla2.0b7

    
    

    
  
Same as here. The style of box-shadow in Firefox caused the horizontal scrollbar.  The version of my Firefox is 3.6.24.

    
    

    
  
(In reply to Erman Gülhan from comment #30)
> Same as here. The style of box-shadow in Firefox caused the horizontal
> scrollbar.  The version of my Firefox is 3.6.24.

This bug will not be fixed in Firefox 3.6. Please update to Firefox 9.
Download is here:  http://www.mozilla.org/firefox/
Blocks: 803543

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: