Closed Bug 446693 Opened 12 years ago Closed 9 years ago

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

Categories

(Core :: Layout, defect)

defect
Not set

Tracking

()

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

People

(Reporter: martijn.martijn, Assigned: dbaron)

References

(Blocks 2 open bugs)

Details

(Keywords: testcase)

Attachments

(4 files)

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
Duplicate of this bug: 449013
Depends on: 286368
Duplicate of this bug: 501482
Duplicate of this bug: 502240
Duplicate of this bug: 511248
Duplicate of this bug: 517526
Duplicate of this bug: 532781
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)
No longer depends on: 286368
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).
Duplicate of this bug: 586255
Duplicate of this bug: 589065
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]
Duplicate of this bug: 601824
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: 9 years ago
Resolution: --- → FIXED
Whiteboard: [patches are in bug 542595]
Target Milestone: --- → mozilla2.0b8
Duplicate of this bug: 606216
Target Milestone: mozilla2.0b8 → mozilla2.0b7
Duplicate of this bug: 610567
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.