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

Status: RESOLVED WORKSFORME

(Core :: Layout, defect)

Description

[Brandon Frohs]

Attachment: 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.

Comment 1

[Brandon Frohs]

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>

Comment 2

[Alice0775 White]

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

Comment 3

[Cosmin Muntean [:cmuntean], Ecosystem QA]

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).

Comment 4

[Brandon Frohs]

Attachment: 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?

Comment 5

[Brandon Frohs]

Attachment: Inconsistent pixel rounding screenshot

Comment 6

[Cosmin Muntean [:cmuntean], Ecosystem QA]

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.