The default bug view has changed. See this FAQ.

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

RESOLVED FIXED in mozilla2.0b7

Status

()

Core
Layout
RESOLVED FIXED
9 years ago
5 years ago

People

(Reporter: Martijn Wargers (dead), Assigned: dbaron)

Tracking

(Blocks: 2 bugs, {testcase})

Trunk
mozilla2.0b7
testcase
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(blocking2.0 betaN+)

Details

Attachments

(4 attachments)

(Reporter)

Description

9 years ago
Created attachment 330824 [details]
testcase1

Are they supposed to do that?
I would not think so, but perhaps I'm wrong.
(Reporter)

Comment 1

9 years ago
Created attachment 330825 [details]
testcase2
(Reporter)

Comment 2

9 years ago
Created attachment 330830 [details]
testcase3

Comment 3

9 years ago
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.
(Reporter)

Comment 4

9 years ago
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

9 years ago
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

Updated

9 years ago
Duplicate of this bug: 449013
(Reporter)

Updated

9 years ago
Depends on: 286368

Updated

8 years ago
Duplicate of this bug: 501482

Updated

8 years ago
Duplicate of this bug: 502240

Updated

8 years ago
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?

Comment 13

7 years ago
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)
(Assignee)

Updated

7 years ago
Depends on: 542595
(Assignee)

Updated

7 years ago
Blocks: 517526, 521607
(Assignee)

Updated

7 years ago
No longer depends on: 286368

Comment 14

7 years ago
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)

Updated

7 years ago
OS: Windows XP → All
Hardware: x86 → All

Comment 15

7 years ago
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

Updated

7 years ago
Duplicate of this bug: 589065

Comment 18

7 years ago
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.

Comment 21

7 years ago
(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

7 years ago
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.
(Assignee)

Comment 23

7 years ago
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+
(Assignee)

Updated

7 years ago
blocking2.0: beta6+ → betaN+
(Assignee)

Updated

7 years ago
Whiteboard: [all patches will go in bug 542595]
(Assignee)

Updated

7 years ago
Whiteboard: [all patches will go in bug 542595] → [patches are in bug 542595]

Updated

7 years ago
Duplicate of this bug: 601824

Comment 25

7 years ago
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.
(Assignee)

Comment 26

7 years ago
patches are in bug 542595
(Assignee)

Comment 27

7 years ago
Fixed by bug 542595.

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

Updated

7 years ago
Duplicate of this bug: 606216

Updated

7 years ago
Target Milestone: mozilla2.0b8 → mozilla2.0b7
(Assignee)

Updated

7 years ago
Duplicate of this bug: 610567

Comment 30

5 years ago
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

5 years ago
(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/

Updated

5 years ago
Blocks: 803543
You need to log in before you can comment on or make changes to this bug.