codesandbox.io - CSS transform is blurry
Categories
(Core :: Graphics: WebRender, defect, P1)
Tracking
()
People
(Reporter: karlcow, Assigned: gw)
References
(Blocks 1 open bug, Regressed 2 open bugs, Regression, )
Details
(Keywords: regression)
Attachments
(1 file, 1 obsolete file)
|
48 bytes,
text/x-phabricator-request
|
diannaS
:
approval-mozilla-beta+
|
Details | Review |
[Tracking Requested - why for this release]:
This is a regression. For people falling into this issue, the rendering becomes really unusable.
Webcompat Priority is 2, because it's not happening on a big site. Though it could be higher given the number of regressions happening on the original bug.
See how the content is blurry.
Compare with Chrome or Safari or Firefox 98.
|
||
Updated•2 years ago
|
|
|
||
Comment 1•2 years ago
|
||
Set release status flags based on info from the regressing bug 1749380
|
|
||
Comment 2•2 years ago
|
||
:gw, since you are the author of the regressor, bug 1749380, could you take a look?
For more information, please visit auto_nag documentation.
|
|
||
Updated•2 years ago
|
|
||
Updated•2 years ago
|
|
||
Updated•2 years ago
|
|
Assignee | |
Updated•2 years ago
|
|
|
Assignee | |
Comment 3•2 years ago
|
||
A smaller repro case:
<html>
<body>
<div style="width: 880px; height: 1119px; perspective: 1774.51px;">
<div style="width: 880px; height: 1119px; transform-style: preserve-3d;
transform: translateZ(1700.51px) matrix3d(-0.928477, 0, -0.371391, 0, 0, -1, 0, 0, 0.371391, 0, -0.928477, 0, 0, 0, -26.9258, 1)
translate(440px, 559.5px);
">
<div style="
transform: translate(-50%, -50%)
matrix3d(
-0.0249043,
-0.0013931,
-0.00168367,
0,
0.001695,
-0.0244716,
-0.00482352,
0,
0.0013793,
0.00491921,
-0.0244724,
0,
-0.177573,
1.75117,
0.277635,
1
);
">
<img src="react1_files/photo-1520333789090-1afc82db536a.avif">
</div>
</div>
</div>
</body>
</html>
|
|
Assignee | |
Comment 4•2 years ago
|
||
Usually, Gecko supplies a requested scale factor for perspective
surfaces. When there is no supplied scale factor, create an estimate
based on the size of the screen projected rectangle, which gives
better results for extreme perspective distortions.
Pushed by gwatson@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/91554918daee Select a better scale factor for perspective surfaces r=gfx-reviewers,lsalzman
|
||
Comment 8•2 years ago
|
||
| bugherder | ||
|
||
Comment 9•2 years ago
|
||
|
||
Comment 10•2 years ago
|
||
(In reply to Mayank Bansal from comment #9)
this is fixed as of https://hg.mozilla.org/mozilla-central/rev/8dff65812a565046db0c6201b5ee0364368f34d5
Checked on 101.0a1 (2022-04-20) (64-bit) and it is still not working.
|
|
Assignee | |
Comment 11•2 years ago
|
||
Interesting - I see the following with the patch enabled:
- Running the reduced test case I created above works correctly.
- Exporting the test case to a ZIP file from codesandbox works correctly.
- Running directly inside codesandbox works initially during load, but then eventually goes blurry again after the load completes.
I'll take a look at why it behaves differently within codesandbox today.
|
|
Assignee | |
Comment 12•2 years ago
|
||
Another minimized test case based which reproduces with the original patch applied:
<!DOCTYPE html>
<html>
<style>
body {
font-size: 64px;
}
.content {
width:334px;
height:216px;
border-radius:3px;
overflow-y:auto;
padding:0px
}
.wrapper {
width:668px;
height:432px;
transform:scale(0.5);
transform-origin:left top 0px
}
</style>
</head>
<body>
<div style="width:880px;height:1119px;perspective:1774.51px">
<div style="width:880px;height:1119px;transform-style:preserve-3d;transform:translateZ(1700.51px) matrix3d(-0.928477,0,-0.371391,0,0,-1,0,0,0.371391,0,-0.928477,0,0,0,-26.9258,1) translate(440px,559.5px)">
<div style="transform:translate(-50%,-50%) matrix3d(-0.0249043,-0.0013931,-0.00168367,0,0.001695,-0.0244716,-0.00482352,0,0.0013793,0.00491921,-0.0244724,0,-0.177573,1.75117,0.277635,1)">
<div class=content>
<div class=wrapper>
<span>Data to enrich your</span>
</div>
</div>
</div>
</div>
</div>
</body>
|
||
Comment 13•2 years ago
|
||
Backed out as per request.
backout: https://hg.mozilla.org/integration/autoland/rev/d486be81d9a69212a994c71c4ed4a5b943d39e67
|
|
Assignee | |
Comment 14•2 years ago
|
||
|
||
Updated•2 years ago
|
|
||
Comment 16•2 years ago
|
||
Pushed by gwatson@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/07b9d36474be Fix scale factors for perspective surfaces when not specified by Gecko r=gfx-reviewers,lsalzman
|
||
Comment 17•2 years ago
|
||
| bugherder | ||
|
|
Assignee | |
Comment 18•2 years ago
|
||
Comment on attachment 9273311 [details]
Bug 1764875 - Fix scale factors for perspective surfaces when not specified by Gecko
Beta/Release Uplift Approval Request
- User impact if declined: Very blurry rendering in some 3d perspective pages
- Is this code covered by automated tests?: Yes
- Has the fix been verified in Nightly?: Yes
- Needs manual test from QE?: Yes
- If yes, steps to reproduce: Per bug report
- List of other uplifts needed: None
- Risk to taking this patch: Low
- Why is the change risky/not risky? (and alternatives if risky): Patch itself is small and simple. Although it's not a perfect fix, it's much better than before.
- String changes made/needed:
- Is Android affected?: Yes
|
|
Assignee | |
Updated•2 years ago
|
|
|
||
Comment 19•2 years ago
|
||
It looks like the issue is resolved on Firefox Nightly 101.0a1
|
|
||
Comment 20•2 years ago
|
||
Comment on attachment 9273311 [details]
Bug 1764875 - Fix scale factors for perspective surfaces when not specified by Gecko
Approved for 100.0rc1
|
|
||
Comment 21•2 years ago
|
||
| bugherder uplift | ||
|
||
Updated•2 years ago
|
|
||
Updated•2 years ago
|
|
||
Comment 22•2 years ago
|
||
Reproduced the issue on Firefox 101.0a1 (2022-04-15) under macOS 11.6.5 by following the STR from Comment 0.
The issue is fixed on Firefox 100.0 and 101.0a1 (2022-04-26). Tests were performed on macOS 11.6.5, Windows 11 and Ubuntu 20.04.
Description
•