Bug 127040 - box-shadow stops working at 2042px spread
Summary: box-shadow stops working at 2042px spread
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac (Intel) OS X 10.9
: P2 Major
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2014-01-15 03:44 PST by Erik Aigner
Modified: 2016-02-17 06:45 PST (History)
1 user (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Erik Aigner 2014-01-15 03:44:03 PST 
box-shadow stops working at a 2042px spread value, if a border-radius is set.

div {
    border-radius: 3px;
    box-shadow: 0 0 0 2042px rgba(0,0,0,0.2), 0 0 0 3px #aaa;
    height: 100px;
    width: 100px;
}
Comment 1 Erik Aigner 2014-01-15 03:44:57 PST 
Browser: Safari 7.0.1/WebKit
Comment 2 Erik Aigner 2014-01-15 04:55:32 PST 
Also the element dimensions seem to affect it, since it works with a width/height of 1px.
Comment 3 Erik Aigner 2014-01-15 04:58:32 PST 
Example http://jsfiddle.net/dKXh8/
Comment 4 Andy E 2016-02-17 06:45:23 PST 
I've experienced the same issue, it appears to also depend on the viewport height.  For instance, on my MBP retina display (viewport size 1440x589 with the dev tools open) a 727x588 element has a maximum shadow spread of 1018px.  On my portrait screen (viewport size 1609x1080) the same element has a maximum shadow spread of 2039px.

If the element is draggable, the shadow sometimes appears as you drag it around, but doesn't always render correctly even when it appears.