Bug 127040
| Summary: | box-shadow stops working at 2042px spread | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Erik Aigner <aigner.erik> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Major | CC: | andyearnshaw |
| Priority: | P2 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | Mac (Intel) | ||
| OS: | OS X 10.9 | ||
Erik Aigner
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;
}
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Erik Aigner
Browser: Safari 7.0.1/WebKit
Erik Aigner
Also the element dimensions seem to affect it, since it works with a width/height of 1px.
Erik Aigner
Example http://jsfiddle.net/dKXh8/
Andy E
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.