[Web] Transform perspective on a Stack affects child widgets inconsistently #61245
Description
Steps to Reproduce
Create a heirarchy
Transform
Stack
Image
Container
Text
On Android the entire Stack is transformed as if it were a flat single layer. On web the child elements are transformed in different amounts / directions.
My transform is this:
Transform(
transform: Matrix4.identity()
..setEntry(3, 2, PERSPECTIVE) // perspective
..rotateY(offset * math.pi),
alignment: Alignment.centerLeft,
transformHitTests: false,
child: child,
);
Expected results:
Works correctly on Android:
Actual results:
On Chrome it looks like this:
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 1.19.0-4.3.pre, on Mac OS X 10.15.5 19F101, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.0)
[✓] IntelliJ IDEA Community Edition (version 2020.1.3)
[✓] Connected device (3 available)
Chrome version: Version 83.0.4103.116 (Official Build) (64-bit)
Metadata
Metadata
Assignees
Labels
High-priority issues at the top of the work listLoading, displaying, rendering imagesA truly polished experienceFound to occur in 1.19Found to occur in 1.20Found to occur in 1.22flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onWeb applications specificallyA fix is in flight