Rendering glitches (Blur and BorderRadius suddenly not working properly) #114359

b3nni97 · 2022-10-31T15:42:10Z

Steps to Reproduce

Execute flutter run on the code sample
You can see that the rendering glitches

Expected results:
The BorderRadius must be displayed correctly at each corner and there must be no blur above the text

Actual results:
The BorderRadius is too high and is only displayed at the top left. The blur of CupertinoNavigationBar is too large in height.

Through a bisect I was able to find out the commit which caused this regression: #114119
In the commit only this PR comes into question flutter/engine#36458

In commit #114198 when the engine PR was reverted it looks like the previous video.

Before	After
RPReplay_Final1667230656.MP4	RPReplay_Final1667229901.MP4

@flar

Code sample

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Transform.scale(
      filterQuality: FilterQuality.none,
      scale: 0.8,
      child: ClipRRect(
        clipBehavior: Clip.hardEdge,
        borderRadius: BorderRadius.circular(20),
        child: CupertinoPageScaffold(
          navigationBar: CupertinoNavigationBar(),
          child: ListView.builder(
            itemBuilder: (_, ndx) {
              return Padding(
                padding: const EdgeInsets.all(15),
                child:
                    Text("Item $ndx", style: const TextStyle(fontSize: 32)),
              );
            },
          ),
        ),
      ),
    );
  }
}

Logs

Flutter version 3.5.0-10.0.pre.123

The text was updated successfully, but these errors were encountered:

flar · 2022-10-31T19:37:53Z

Thank you for doing the bisect for us. I have reproduced the problem.

We have reverted the LayerStateStack code and will work on a solution to this and other issues for the next iteration.

danagbemava-nc · 2022-11-01T07:49:27Z

I cannot reproduce the issue on the latest version of master.

@flar, should this issue be kept open?

recording

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2022-11-01.at.07.46.49.mp4

flutter doctor - v(master)

[!] Flutter (Channel master, 3.5.0-12.0.pre.46, on macOS 13.0 22A380 darwin-arm64, locale en-GB)
    • Flutter version 3.5.0-12.0.pre.46 on channel master at /Users/nexus/dev/sdks/flutters
    ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 0f1d0e39e9 (2 hours ago), 2022-11-01 13:33:33 +0800
    • Engine revision f721db653d
    • Dart version 2.19.0 (build 2.19.0-356.0.dev)
    • DevTools version 2.18.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A309
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2021.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview 2.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2021.3)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[✓] Android Studio (version 2021.3)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9014738/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[✓] VS Code (version 1.72.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.50.0

[✓] Connected device (3 available)
    • iPhone 14 Pro (mobile) • 5B802496-18C0-4AF6-84C2-57E11359A79B • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-0 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 13.0 22A380 darwin-arm64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 107.0.5304.87

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 3 categories.

flar · 2022-11-04T06:29:22Z

I cannot reproduce the issue on the latest version of master.

That's because we reverted the code. The LayerStateStack code will be relanded with a fix for this problem (and some benchmark regressions). We don't yet have a PR for the new version.

You can close it if you want, or wait until you verify against the new version of the LayerStateStack code.

danagbemava-nc · 2022-11-04T06:52:15Z

I'll leave this open to track the implementation of the new version of the LayerStateStack code.

chinmaygarde · 2022-11-07T19:25:07Z

This has been reverted and relanded with a fix.

flar · 2022-11-07T20:54:30Z

I've created a PR that includes the fixes that will hopefully prevent the problem seen here: flutter/engine#37394

That PR is not ready to merge because there is still a 10% regression in a benchmark that needs to be fixed.

github-actions · 2022-11-22T07:00:44Z

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

danagbemava-nc added the in triage Presently being triaged by the triage team label Nov 1, 2022

danagbemava-nc added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Nov 1, 2022

chinmaygarde closed this as completed Nov 7, 2022

flar mentioned this issue Nov 7, 2022

Reland layer state stack 2 flutter/engine#37394

Merged

danagbemava-nc added the r: fixed Issue is closed as already fixed in a newer version label Nov 8, 2022

github-actions bot locked as resolved and limited conversation to collaborators Nov 22, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Rendering glitches (Blur and BorderRadius suddenly not working properly) #114359

Rendering glitches (Blur and BorderRadius suddenly not working properly) #114359

b3nni97 commented Oct 31, 2022 •

edited by danagbemava-nc

Loading

flar commented Oct 31, 2022

Uh oh!

danagbemava-nc commented Nov 1, 2022

Uh oh!

flar commented Nov 4, 2022

Uh oh!

danagbemava-nc commented Nov 4, 2022

Uh oh!

chinmaygarde commented Nov 7, 2022

Uh oh!

flar commented Nov 7, 2022

Uh oh!

github-actions bot commented Nov 22, 2022

Uh oh!

Rendering glitches (Blur and BorderRadius suddenly not working properly) #114359

Rendering glitches (Blur and BorderRadius suddenly not working properly) #114359

Comments

b3nni97 commented Oct 31, 2022 • edited by danagbemava-nc Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Steps to Reproduce

flar commented Oct 31, 2022

Uh oh!

danagbemava-nc commented Nov 1, 2022

Uh oh!

flar commented Nov 4, 2022

Uh oh!

danagbemava-nc commented Nov 4, 2022

Uh oh!

chinmaygarde commented Nov 7, 2022

Uh oh!

flar commented Nov 7, 2022

Uh oh!

github-actions bot commented Nov 22, 2022

Uh oh!

b3nni97 commented Oct 31, 2022 •

edited by danagbemava-nc

Loading