Skip to content

[Impeller] Flutter 3.13.0 regression of box shadow from container with partial border radius drawn over scrollable #132936

@fangjue

Description

@fangjue

Is there an existing issue for this?

Steps to reproduce

  1. Create a Container with box shadow and bottom left border radius (actually any partial border radius reproduces the bug) at the top. Place a ListView below it with some simple text items. See sample code for details.

  2. Run on iOS with impeller enabled and disabled and compare results.

flutter run --enable-impeller
flutter run --no-enable-impeller
  1. Scroll the list and observe the extra white background on the text 'item x' of the list when Impeller is used.

This bug does not reproduce on Flutter 3.10.6 on the same device. Also it does not reproduce on Android with Flutter 3.13.0 with the flag --enable-impeller. The border radius on the box shadowed container must be partial to reproduce the bug.

Expected results

No extra white box should be drawn over the box shadow while scrolling the list.

Actual results

Extra white box is drawn over the box shadow after the list is scrolled. If scrolled up for the first time, the extra white blinks.

Code sample

Code sample
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Box shadow with impeller bug',
      home: Scaffold(
        appBar: PreferredSize(preferredSize: const Size.fromHeight(60), child: Container(
          decoration: const BoxDecoration(
            color: Colors.white, // Background color can be removed and this bug still reproduces.
            borderRadius: BorderRadius.only(bottomLeft: Radius.circular(30)), // BorderRadius.circular(30) does not reproduce the bug.
            boxShadow: [BoxShadow(color: Colors.black,blurRadius: 120)],
          ),
        )),
        body: ListView.builder(
          physics: const BouncingScrollPhysics(),
          itemBuilder: (context, index) => index < 100 ? Padding(padding: const EdgeInsets.all(16), child: Center(child: Text('item $index'))) : null
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

image

IMG_0059.MOV

Flutter Doctor output

Doctor output
[✓] Flutter (Channel stable, 3.13.0, on macOS 12.6.1 21G217 darwin-x64, locale en-US)
    • Flutter version 3.13.0 on channel stable at /Users/jipeng/Desktop/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision efbf63d9c6 (5 days ago), 2023-08-15 21:05:06 -0500
    • Engine revision 1ac611c64e
    • Dart version 3.1.0
    • DevTools version 2.25.0
    • Pub download mirror https://pub.flutter-io.cn
    • Flutter download mirror https://storage.flutter-io.cn

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/xxx/Library/Android/sdk/
    • Platform android-32, build-tools 32.0.0
    • ANDROID_HOME = /Users/xxx/Library/Android/sdk/
    • Java binary at: /Applications/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.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14C18
    • CocoaPods version 1.11.2

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

[✓] 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)

[✓] Connected device (3 available)
    • xxx (mobile) • xxx-xxx • ios            • iOS 15.6.1 19G82
    • macOS (desktop)     • macos                     • darwin-x64     • macOS 12.6.1 21G217 darwin-x64
    • Chrome (web)        • chrome                    • web-javascript • Google Chrome 116.0.5845.96

[✓] Network resources
    • All expected network resources are available.

• No issues found!

Metadata

Metadata

Assignees

Labels

P0Critical issues such as a build break or regressionc: regressionIt was better in the past than it is nowe: impellerImpeller rendering backend issues and features requestsengineflutter/engine related. See also e: labels.found in release: 3.13Found to occur in 3.13found in release: 3.14Found to occur in 3.14has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-iosiOS applications specificallyr: fixedIssue is closed as already fixed in a newer versionteam-engineOwned by Engine teamtriaged-engineTriaged by Engine team

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions