683707 - -moz-transform: scaleX/Y(-1) distorts image

Status: NEW

(Core :: Layout, defect)

Description

[Stephen Horlander [:shorlander]]

Attachment: Blurry Tab-Overflow Arrow

We use -moz-transform: scaleX(-1) to flip images to avoid duplication and for RTL mode. In some cases it distorts the image making it blurry/indistinct. For example the the tab-overflow arrows (bug 580194)

Comment 1

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Maybe this is related to some of the pixel-snapping we do being disabled when there's a transform?  If so, should we distinguish between some types of transforms that should disable pixel snapping and some that shouldn't?  That said, doing so would likely make animations of transforms look bad in a bunch of cases.

Comment 2

[Robert O'Callahan (:roc) (email my personal email if necessary)]

gfxMatrix::HasNonTranslationOrFlip needs to be extended to support xx==-1.0. Cab someone roll a patch for that? My tree's not in a good state.

If that doesn't fix it, we probably have some places that check gfxMatrix::HasNonIntegerTranslation that should be checking gfxMatrix::HasNonTranslationOrFlip.

Comment 3

[Matt Woodrow (:mattwoodrow)]

Attachment: Detect X flips in HasNonTranslationOrFlip

Not sure if this actually fixes the problem, is there a test case to check?

Comment 4

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Comment on attachment 557394 [details] [diff] [review]
Detect X flips in HasNonTranslationOrFlip

Review of attachment 557394 [details] [diff] [review]:
-----------------------------------------------------------------

I don't know if this will fix the bug, but we should definitely do this.

It might possibly fix the bug by changing this path:
http://mxr.mozilla.org/mozilla-central/source/layout/base/FrameLayerBuilder.cpp#1703

Comment 5

[Stephen Horlander [:shorlander]]

Attachment: Tab-Overflow Arrows after Patch

(In reply to Matt Woodrow (:mattwoodrow) from comment #3)
> Created attachment 557394 [details] [diff] [review]
> Detect X flips in HasNonTranslationOrFlip
> 
> Not sure if this actually fixes the problem, is there a test case to check?

Doesn't appear to fix the issue.

Comment 6

[Matt Woodrow (:mattwoodrow)]

Can you reproduce this in a standalone html testcase?

It'd be great to be able to test this locally.

Comment 7

[Stephen Horlander [:shorlander]]

(In reply to Matt Woodrow (:mattwoodrow) from comment #6)
> Can you reproduce this in a standalone html testcase?
> 
> It'd be great to be able to test this locally.

Yes, let me try and reproduce in HTML.

Comment 8

[Stephen Horlander [:shorlander]]

(In reply to Stephen Horlander from comment #7)
> (In reply to Matt Woodrow (:mattwoodrow) from comment #6)
> > Can you reproduce this in a standalone html testcase?
> > 
> > It'd be great to be able to test this locally.
> 
> Yes, let me try and reproduce in HTML.

So I managed to reproduce it here: http://people.mozilla.com/~shorlander/scale-test/scalex-test.html

Something I noticed is that if I set a width/height on the container then it doesn't blur the image. This works no matter what dimensions I set.

Comment 9

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In reply to Stephen Horlander from comment #8)
> Something I noticed is that if I set a width/height on the container then it
> doesn't blur the image. This works no matter what dimensions I set.

Even if you set fractional pixel widths (try 50.1px, 50.2px, etc...)?

Comment 10

[Stephen Horlander [:shorlander]]

(In reply to David Baron [:dbaron] from comment #9)
> (In reply to Stephen Horlander from comment #8)
> > Something I noticed is that if I set a width/height on the container then it
> > doesn't blur the image. This works no matter what dimensions I set.
> 
> Even if you set fractional pixel widths (try 50.1px, 50.2px, etc...)?

Ah, yes setting fractional widths makes it fuzzy.

Comment 11

[Johnny Rodgers]

I was able to work around this issue by adding:

-moz-transform: scale(-1, 1);
image-rendering: -moz-crisp-edges;

See: https://developer.mozilla.org/en/CSS/image-rendering

Comment 12

[:Gijs (he/him)]

So the testcase works for me on both OS X and Windows, but the tab bar overflow arrows are blurry and wrong again on Windows (see bug 996568).

Matt, is there any chance you'll have time to look into what's going on here soon?

Comment 13

[:Gijs (he/him)]

Whoops, didn't mean to set this after all, seeing as the testcase is fixed but I'm still seeing a 'real' issue...

Comment 14

[Elbart]

Attachment: 683707_testcase_2.htm

(In reply to :Gijs Kruitbosch from comment #12)
> So the testcase works for me on both OS X and Windows ...

The testcase in comment 8 was fixed in this range...
Last good revision: f7c89de3ab43 (2012-09-16)
First bad revision: 3f0587ce1774 (2012-09-17)
Pushlog:
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=f7c89de3ab43&tochange=3f0587ce1774

... but it broke scaleY in the process, see attachment.

Comment 15

[Elbart]

Attachment: 683707_testcase_2.htm

Wrong dates, sorry.