Skip to content

Clipping a very long child using a RoundedSuperellipseBorder produces artifacts #179875

Description

@PiotrRogulski

Steps to reproduce

  1. Create a Container() with decoration: ShapeDecoration(shape: RoundedSuperellipseBorder(borderRadius: .circular(32))) and clipBehavior: .antiAlias
  2. Put a very long child inside the container.

Expected results

The child is clipped with a superellipse-shaped Container smoothly, just like when using ClipRSuperellipse.

Actual results

There are visual artifacts around the corners.

Code sample

Code sample (with visual glitches)
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(
          child: Padding(
            padding: const .all(32),
            child: Container(
              decoration: ShapeDecoration(
                shape: RoundedSuperellipseBorder(borderRadius: .circular(32)),
              ),
              clipBehavior: .antiAlias,
              child: Column(
                children: [
                  for (var i = 0; i < 1_000 /* or 10_000 */; i++)
                    Container(
                      height: 32,
                      color: Colors.primaries[i % Colors.primaries.length],
                    ),
                ],
              ),
            ),
          ),
        ),
      ),
    ),
  );
}
Code sample (displays correctly)
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(
          child: Padding(
            padding: const .all(32),
            child: ClipRSuperellipse(
              borderRadius: .circular(32),
              child: Column(
                children: [
                  for (var i = 0; i < 10_000; i++)
                    Container(
                      height: 32,
                      color: Colors.primaries[i % Colors.primaries.length],
                    ),
                ],
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

Screenshots or Video

Screenshots / Video demonstration

All screenshots taken on macOS 26.2

For 1K children:

Image

For 10K children:

Image

The same, but with ClipRSuperellipse:

Image

Logs

Logs
[Paste your logs here]

Flutter Doctor output

Doctor output
[✓] Flutter (Channel master, 3.40.0-1.0.pre-109, on macOS 26.2 25C56 darwin-arm64, locale en-US) [1,450ms]
    • Flutter version 3.40.0-1.0.pre-109 on channel master at /Users/piotr/fvm/versions/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 9cc43f13a5 (5 days ago), 2025-12-10 21:15:09 +0300
    • Engine revision 5b74a3b8e8
    • Dart version 3.11.0 (build 3.11.0-227.0.dev)
    • DevTools version 2.53.0
    • Feature flags: enable-web, enable-linux-desktop, enable-macos-desktop, enable-windows-desktop, enable-android, enable-ios, cli-animations, enable-native-assets, enable-dart-data-assets, enable-swift-package-manager, omit-legacy-version-file, enable-lldb-debugging, no-enable-uiscene-migration

[✓] Android toolchain - develop for Android devices (Android SDK version 36.1.0-rc1) [1,465ms]
    • Android SDK at /Users/piotr/Library/Android/sdk
    • Emulator version 36.3.10.0 (build_id 14472402) (CL:N/A)
    • Platform android-36, build-tools 36.1.0-rc1
    • ANDROID_HOME = /Users/piotr/Library/Android/sdk
    • Java binary at: /Users/piotr/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.8+-14196175-b1038.72)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 26.2) [1,280ms]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 17C52
    • CocoaPods version 1.16.2

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

[✓] Connected device (3 available) [6.6s]
    • Pixel 8 Pro (mobile) • 3C201FDJG00376 • android-arm64  • Android 16 (API 36)
    • macOS (desktop)      • macos          • darwin-arm64   • macOS 26.2 25C56 darwin-arm64
    • Chrome (web)         • chrome         • web-javascript • Google Chrome 143.0.7499.41

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

• No issues found!

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work listc: renderingUI glitches reported at the engine/skia or impeller rendering levelfound in release: 3.38Found to occur in 3.38found in release: 3.40Found to occur in 3.40frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionteam-frameworkOwned by Framework teamtriaged-frameworkTriaged by Framework team

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions