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.
Component: Untriaged → Layout
Product: Firefox → Core
QA Contact: untriaged → layout
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>
Attachment #634918 - Attachment mime type: text/plain → text/html
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
Status: UNCONFIRMED → NEW
Ever confirmed: true
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).
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)
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.
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.