CSS scale() Transform and Background Position Produce Visual Glitch (Gap)




3 years ago
9 months ago


(Reporter: Bailey P, Unassigned)


38 Branch
Mac OS X

Firefox Tracking Flags

(Not tracked)



(1 attachment)



3 years ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2421.0 Safari/537.36

Steps to reproduce:

On Firefox 38.0.5 and 40.0a2 (on OSX 10.10.3, but not Windows), combining a CSS3 scale() transform on a parent div with inline-block child divs that have a background image with background-position set creates a visual glitch. Namely, between each of the child divs, a 1px width transparent line appears (it isn't padding or a text shape, it is a 1px line that is missing from the div to the right of it). You can see the glitch in this codepen: http://jsbin.com/dumekayiha/1/edit?html,output

Discussion and screenshots on StackOverflow: http://stackoverflow.com/q/30677103/568785

Actual results:

A gap appears between the children in the form of a transparent 1px line that cuts out of the right div (on the border of two child divs).

Firefox 38.0.5 OSX 10.10.3: http://i.stack.imgur.com/zP7yH.png
Firefox Dev Edition 40.0a2 OSX 10.10.3: http://i.stack.imgur.com/amyRw.png

Expected results:

There should be no such line (If you open up the inspector, add `transform-style: preserve-3d;` to the parent, and rapidly toggle this property on and off the line disappears in FF 38.0.5, which hints to me that this is a glitch).

Interestingly enough, those same verions of FF do not exhibit this bug on Windows 7. Additionally, Chrome and IE10/11 properly render this:

Firefox 38.0.5 Window 7: http://i.stack.imgur.com/gJICP.png
Firefox 40.0a2 Windows 7: http://i.stack.imgur.com/EPVhe.png
Chrome 45.0.2421.0 OSX 10.10.3: http://i.stack.imgur.com/S3SjS.png
Chrome 43.0.2357.81 Windows 7: http://i.stack.imgur.com/Ekh7Q.png
IE 10 Windows 7: http://i.stack.imgur.com/RbKAX.png
IE 11 Windows 7: http://i.stack.imgur.com/KeOwe.png


3 years ago
Component: Untriaged → Layout
OS: Unspecified → Mac OS X
Product: Firefox → Core

Comment 1

2 years ago
Created attachment 8738639 [details]
mirrorcracks.png transform scale(-1,1) breaks background

I was about to file a similar observation in FF45.0.1 with Win7.
On my site 


I apply on april first (fools day) an additional CSS rule 

body {transform: scale(-1,1);}

that shows the site in a mirror (left to right).
When the site is in mirror all background images seems cracked and they are separated by a 1 pixel black line.

How to reproduce: go to the site; click right and open inspect element; Add the rule transform: scale(-1,1); to the body selector at the right bottom. See how the background of the blocks become divided in 9 parts.

See attachment mirrorcracks.png

I did not notice this problem before (few years ago).

In IE11 there are also some separations when applying this CSS rule, but not all of them as in FF.

Interesting is that the Bug 1252898 - image alignment error seems to be cured by this transform.
All background images are level again as they should.

Also Bug 1262430 - Background image positioning shifts up on vertical centering could be related.
You need to log in before you can comment on or make changes to this bug.