inset box-shadow gets clipped on the outside

RESOLVED DUPLICATE of bug 1250947

Status

()

Core
Layout: View Rendering
RESOLVED DUPLICATE of bug 1250947
2 years ago
2 years ago

People

(Reporter: skagon, Unassigned)

Tracking

44 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments)

(Reporter)

Description

2 years ago
Created attachment 8722998 [details]
Firefox shadow bug.png

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:44.0) Gecko/20100101 Firefox/44.0.3 Waterfox/44.0.3
Build ID: 20160218160818

Steps to reproduce:

In my own personal website, I've got a few box shadows to create the effect of 3D depth.
It's just a plain case of CSS: box-shadow: 10px 14px 2px rgba(0,0,0,0.3) inset;
Up until Firefox 43, everything worked perfectly.
Firefox 44 clips the shadow edges.


Actual results:

Firefox 44 clips the inset shadow edges, where the inset shadow should have no edges, in effect being infinite on the outside.


Expected results:

Again, the inset shadow should, theoretically be "infinite" on the outside and not "crop" where the containing element ends (plus offsets).

Comment 1

2 years ago
Could you attach a reduced testcase to the bug report, please.
Flags: needinfo?(skagon)
(Reporter)

Comment 2

2 years ago
(In reply to Loic from comment #1)
> Could you attach a reduced testcase to the bug report, please.

Do you mean, lower resolution image, or a more simple testcase?
Flags: needinfo?(skagon)

Comment 3

2 years ago
A simpler testcase. Or if you cant't, the URL of the website with the issue.
(Reporter)

Comment 4

2 years ago
Created attachment 8723030 [details]
shadow testcase.html
(Reporter)

Comment 5

2 years ago
No problem. Here's a simple HTML file.
Notice how the inset shadow leaves a gap on the top and left side, between shadow and DIV edge. The inset shadow should be extending all the way up and left, until the edge of the DIV.
(Reporter)

Comment 6

2 years ago
Created attachment 8723036 [details]
Firefox shadow bug comparison.png
(Reporter)

Comment 7

2 years ago
I also included a PNG showing the difference in rendering this same HTML (plus a 1px border I added for clarity) on FF <44 and FF 44.
I hope it's clear now.
It's already fixed in Firefox 45, currently beta, will be released 2016-03-07 [1].

This is a regression from bug 1188075 and bug 1213545 (firefox 44), and fixed in bug 1227216 (firefox 45).

[1] https://wiki.mozilla.org/RapidRelease/Calendar
Status: UNCONFIRMED → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1227216

Updated

2 years ago
Blocks: 1250947

Comment 9

2 years ago
The reduced testcase is wrong here (even fixed in next versions) and doesn't fit with the real issue on the website.
See the follow-up bug 1250947 with the right testcase.
Resolution: DUPLICATE → FIXED

Updated

2 years ago
Resolution: FIXED → DUPLICATE
Duplicate of bug: 1250947

Updated

2 years ago
No longer blocks: 1250947
You need to log in before you can comment on or make changes to this bug.