1467390 - Hidden text and image content on the backface of an element doesn't render correctly when transformed (appears blurry)

Status: NEW

(Core :: Graphics: Text, defect, P3)

Description

[u618966]

Attachment: This test file shows the exact problem I'm having.

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36
Firefox for Android

Steps to reproduce:

1. Created a 3D card effect with content hidden on the back face of the element.
2. When clicked on the card scales and rotates to show it's content.



Actual results:

In Firefox the text and images appear blurry (unrendered).


Expected results:

The content on the back face should be sharp when turned.

Comment 1

[Daniel_A[:daschilean] [Please contact - [e-mail]]]

I manage to reproduce this issue on Windows 10 x64 with the latest FF 62.0a1 (2018-06-11) (64-bit). I see the 'Firefox for Android' on your 'User Agent', could you please tell me which platform do you mean Desktop or Android?

Comment 2

[u618966]

(In reply to Daniel_A from comment #1)
> I manage to reproduce this issue on Windows 10 x64 with the latest FF 62.0a1
> (2018-06-11) (64-bit). I see the 'Firefox for Android' on your 'User Agent',
> could you please tell me which platform do you mean Desktop or Android?

Desktop (Windows 10, 64-bit)

Comment 3

[Andrew Osmond [:aosmond] (he/him)]

Non-WebRender Linux also has blurry text, as if it failed to scale the font as the card got larger. WebRender Linux is worse, but different, where the font is also blurry but becomes crisp eventually.

Comment 4

[Lee Salzman [:lsalzman]]

This looks like a layerization issue with 3D transforms. The layer is rendered at the same resolution no matter what, and then only after does the resulting layer get scaled. Markus, ideas on whether this is what should be happening and if it makes sense?

Comment 5

[Markus Stange [:mstange]]

It looks like this is "by design": we always choose a rasterization scale of 1 for 3d transforms:
https://searchfox.org/mozilla-central/rev/c3fef66a5b211ea8038c1c132706d02db408093a/layout/painting/FrameLayerBuilder.cpp#6205

Safari seems to be doing the same, and the text stays blurry in Safari.
In Chrome, the text is sharp, so they seem to be choosing a different scale.