Last Comment Bug 446693 - -moz-box-shadow and text-shadow causing scrollbars
: -moz-box-shadow and text-shadow causing scrollbars
Status: RESOLVED FIXED
: testcase
Product: Core
Classification: Components
Component: Layout (show other bugs)
: Trunk
: All All
: -- normal with 6 votes (vote)
: mozilla2.0b7
Assigned To: David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch)
:
Mentors:
: 449013 502240 511248 532781 586255 589065 601824 606216 610567 (view as bug list)
Depends on: 542595
Blocks: 521607 803543 517526 590039
  Show dependency treegraph
 
Reported: 2008-07-22 13:46 PDT by Martijn Wargers [:mwargers] (not working for Mozilla)
Modified: 2012-10-19 07:39 PDT (History)
29 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---
betaN+


Attachments
testcase1 (223 bytes, text/html)
2008-07-22 13:46 PDT, Martijn Wargers [:mwargers] (not working for Mozilla)
no flags Details
testcase2 (356 bytes, text/html)
2008-07-22 13:46 PDT, Martijn Wargers [:mwargers] (not working for Mozilla)
no flags Details
testcase3 (373 bytes, text/html)
2008-07-22 14:36 PDT, Martijn Wargers [:mwargers] (not working for Mozilla)
no flags Details
testcase4 (366 bytes, text/html)
2010-01-21 12:23 PST, Lukas Stabe
no flags Details

Description Martijn Wargers [:mwargers] (not working for Mozilla) 2008-07-22 13:46:13 PDT
Created attachment 330824 [details]
testcase1

Are they supposed to do that?
I would not think so, but perhaps I'm wrong.
Comment 1 Martijn Wargers [:mwargers] (not working for Mozilla) 2008-07-22 13:46:53 PDT
Created attachment 330825 [details]
testcase2
Comment 2 Martijn Wargers [:mwargers] (not working for Mozilla) 2008-07-22 14:36:20 PDT
Created attachment 330830 [details]
testcase3
Comment 3 Michael Ventnor 2008-07-22 16:31:14 PDT
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.
Comment 4 Martijn Wargers [:mwargers] (not working for Mozilla) 2008-07-22 16:36:39 PDT
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.
Comment 5 philippe (part-time) 2008-07-22 16:38:44 PDT
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
Comment 6 philippe (part-time) 2008-08-04 05:02:50 PDT
*** Bug 449013 has been marked as a duplicate of this bug. ***
Comment 7 jacklukic@gmail.com 2009-06-30 14:28:52 PDT
*** Bug 501482 has been marked as a duplicate of this bug. ***
Comment 8 philippe (part-time) 2009-07-03 17:25:56 PDT
*** Bug 502240 has been marked as a duplicate of this bug. ***
Comment 9 philippe (part-time) 2009-08-18 16:10:03 PDT
*** Bug 511248 has been marked as a duplicate of this bug. ***
Comment 10 Nochum Sossonko [:Natch] 2009-11-16 17:58:10 PST
*** Bug 517526 has been marked as a duplicate of this bug. ***
Comment 11 Markus Stange [:mstange] [away until June 27] 2009-12-04 02:25:01 PST
*** Bug 532781 has been marked as a duplicate of this bug. ***
Comment 12 Sergey «Mithgol the Webmaster» Sokoloff 2009-12-30 10:04:30 PST
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?
Comment 13 Lukas Stabe 2010-01-21 12:23:09 PST
Created attachment 422814 [details]
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)
Comment 14 dysinscr 2010-07-07 13:46:15 PDT
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)
Comment 15 polet82 2010-08-01 16:25:37 PDT
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).
Comment 16 Boris Zbarsky [:bz] (Out June 25-July 6) 2010-08-11 10:28:38 PDT
*** Bug 586255 has been marked as a duplicate of this bug. ***
Comment 17 Alice0775 White 2010-08-19 23:49:39 PDT
*** Bug 589065 has been marked as a duplicate of this bug. ***
Comment 18 j.j. 2010-09-04 18:23:31 PDT
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)
Comment 19 Robert O'Callahan (:roc) (Exited; email my personal email if necessary) 2010-09-05 16:39:25 PDT
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?
Comment 20 philippe (part-time) 2010-09-05 17:22:04 PDT
(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.
Comment 21 j.j. 2010-09-05 18:32:23 PDT
(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.
Comment 22 Jeffrey D. King 2010-09-05 20:29:36 PDT
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.
Comment 23 David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) 2010-09-11 20:16:50 PDT
I'm inclined to think that this does block shipping box-shadow without a prefix, and therefore, that we want it in beta6.
Comment 24 philippe (part-time) 2010-10-04 18:42:49 PDT
*** Bug 601824 has been marked as a duplicate of this bug. ***
Comment 25 Black Fox 2010-10-06 06:15:15 PDT
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.
Comment 26 David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) 2010-10-06 10:00:51 PDT
patches are in bug 542595
Comment 27 David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) 2010-10-06 22:06:42 PDT
Fixed by bug 542595.

Please note that the fix is NOT in beta 7.
Comment 28 David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) 2010-10-21 09:13:21 PDT
*** Bug 606216 has been marked as a duplicate of this bug. ***
Comment 29 David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) 2010-11-08 19:23:53 PST
*** Bug 610567 has been marked as a duplicate of this bug. ***
Comment 30 Erman Gülhan 2011-12-20 16:21:12 PST
Same as here. The style of box-shadow in Firefox caused the horizontal scrollbar.  The version of my Firefox is 3.6.24.
Comment 31 j.j. 2012-01-06 17:44:00 PST
(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/

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