'box-shadow' and '-moz-transform:translate()' cause other elements to show through

RESOLVED WORKSFORME

Status

()

Core
Layout
RESOLVED WORKSFORME
6 years ago
2 years ago

People

(Reporter: Brandon Frohs, Unassigned)

Tracking

({regression})

Trunk
x86
All
regression
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments)

(Reporter)

Description

6 years ago
Created attachment 634918 [details]
Example showing issue with equivalent `position:relative;top:XXX;`

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:13.0) Gecko/20100101 Firefox/13.0
Build ID: 20120601173917

Steps to reproduce:

I added a box shadow to an element that was translated -50% vertically.


Actual results:

The background of the page was visible between the box-shadow and the element's background.


Expected results:

The box-shadow and background should have remained connected, as if the translation had never happened.

Updated

6 years ago
Component: Untriaged → Layout
Product: Firefox → Core
QA Contact: untriaged → layout
(Reporter)

Comment 1

6 years ago
It should also be noted that the gap *only* appears when the translation applied is not a whole pixel.


Whole pixel translation, appears correctly:

<div style="height:20px;-moz-transform:translate(0,50%);"></div>


Partial pixel translation, appears incorrectly:

<div style="height:15px;-moz-transform:translate(0,50%);"></div>
(Reporter)

Updated

6 years ago
Attachment #634918 - Attachment mime type: text/plain → text/html

Comment 2

6 years ago
I can reproduce in
http://hg.mozilla.org/mozilla-central/rev/c3190d715044
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:16.0) Gecko/16.0 Firefox/16.0a1 ID:20120620065138

Regression window(m-c)
Good:
http://hg.mozilla.org/mozilla-central/rev/a23353de5415
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:7.0a1) Gecko/20110622 Firefox/7.0a1 ID:20110622112035
Bad:
http://hg.mozilla.org/mozilla-central/rev/cd95d565c4d9
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:7.0a1) Gecko/20110622 Firefox/7.0a1 ID:20110622125401
Pushlog:
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=a23353de5415&tochange=cd95d565c4d9

Regression window(m-c)
Good:
http://hg.mozilla.org/integration/mozilla-inbound/rev/ff8bd5d40a57
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:7.0a1) Gecko/20110622 Firefox/7.0a1 ID:20110622034824
Bad:
http://hg.mozilla.org/integration/mozilla-inbound/rev/e302cef502f6
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:7.0a1) Gecko/20110622 Firefox/7.0a1 ID:20110622051524
Pushlog:
http://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=ff8bd5d40a57&tochange=e302cef502f6

Triggered by: Bug 637852
Blocks: 637852
Status: UNCONFIRMED → NEW
Ever confirmed: true
Keywords: regression
OS: Linux → All
Version: 13 Branch → Trunk
Summary: `box-shadow` and `-moz-transform:translate();` cause other elements to show through → 'box-shadow' and '-moz-transform:translate()' cause other elements to show through
Firefox: 50.0a1, Build ID: 20160703030210
User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:50.0) Gecko/20100101 Firefox/50.0

I have tested this issue on the latest Firefox (47.0.1) release and latest Nightly (50.0a1) build, and I could not reproduce it. I have used the provided test case from comment 0 and the box-shadow and background remained connected.

Brandon, is this still reproducible on your end ? If yes, can you please retest this using latest Firefox release and latest Nightly build (https://nightly.mozilla.org/) and report back the results ? When doing this, please use a new clean Firefox profile, maybe even safe mode, to eliminate custom settings as a possible cause (https://goo.gl/PNe90E).
Flags: needinfo?(bfrohs)
(Reporter)

Comment 4

2 years ago
Created attachment 8768811 [details]
Inconsistent pixel rounding

It looks like the space between the box-shadow and background is gone, but the pixel snapping results in different drawings depending on the `top`. When a whole number pixel value is used, the box is drawn solid black (4px tall). However, when a partial pixel value is used, the bottom pixel is gray (essentially 3.5px tall).

I'll add a screenshot that shows the differences.

Should I open a new bug and close this one?
Flags: needinfo?(bfrohs) → needinfo?(cosmin.muntean)
(Reporter)

Comment 5

2 years ago
Created attachment 8768813 [details]
Inconsistent pixel rounding screenshot
Hi Brandon,

Yes, it will be better if you log a new bug for this and close this one as Resolved - WFM. When you log the new bug, please attache the provided test case from comment 4.
I was able to reproduce it, on Windows 7 x64 with the latest Firefox (47.0.1) release and latest Nightly (50.0a1) build.
Flags: needinfo?(cosmin.muntean)
(Reporter)

Updated

2 years ago
Status: NEW → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.