Rounded rectangles painted badly[ios14][web][skia]

Steps to Reproduce

Save min repro code
flutter build web --dart-define=FLUTTER_WEB_USE_SKIA=true --release
Open it up in iOS14 Safari or Chrome

min repro code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        floatingActionButton: Container(
            margin: EdgeInsets.symmetric(horizontal: 4),
            padding: EdgeInsets.all(6),
            width: MediaQuery.of(context).size.width * 0.8,
            height: 100,
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(80),
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(80),
              child: TabBar(
                  isScrollable: true,
                  labelColor: Colors.black,
                  unselectedLabelColor: Colors.grey,
                  indicatorColor: Colors.white,
                  indicator: BoxDecoration(shape: BoxShape.rectangle, borderRadius: BorderRadius.all(Radius.circular(30)), color: Colors.white),
                  tabs: [
                    Tab(icon: Icon(Icons.ac_unit)),
                    Tab(icon: Icon(Icons.ac_unit)),
                    Tab(icon: Icon(Icons.ac_unit)),
                    Tab(icon: Icon(Icons.ac_unit)),
                  ]),
            )),
      ),
    );
  }
}

Expected results:
this is on iOS14 (standard, not skia)

Actual results:
this is on iOS14 (skia): flutter build web --dart-define=FLUTTER_WEB_USE_SKIA=true --release
https://experiment24.web.app/#/

Bonus bug?
this is on iPhone 11 iOS13 simulator using skia: flutter build web --dart-define=FLUTTER_WEB_USE_SKIA=true --release

flutter doctor -v

[✓] Flutter (Channel master, 1.21.0-6.0.pre.117, on Mac OS X 10.15.5 19F101, locale es-ES)
    • Flutter version 1.21.0-6.0.pre.117 at /Users/tomas/Development/flutter
    • Framework revision 7ec2d360bc (27 hours ago), 2020-07-29 23:25:38 -0700
    • Engine revision a9910e409c
    • Dart version 2.10.0 (build 2.10.0-1.0.dev 24c7666def)


[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/tomas/Library/Android/sdk
    • Platform android-29, build-tools 29.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.9.1

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

[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 44.0.2
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)

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

[✓] Connected device (4 available)
    • iPhone (mobile)    • 00008020-000415840E50003A            • ios            • iOS 14.0
    • iPhone 11 (mobile) • 04298E38-2633-4586-B868-1FBD5C708AF7 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-13-5 (simulator)
    • Web Server (web)   • web-server                           • web-javascript • Flutter Tools
    • Chrome (web)       • chrome                               • web-javascript • Google Chrome 84.0.4147.105

• No issues found!

@tomasbaran

Hi @tomasbaran
I cannot reproduce this issue on latest master channel.

Can you upgrade to master and try again:
flutter channel master
flutter upgrade --force
flutter doctor -v

flutter doctor -v

[✓] Flutter (Channel master, 1.21.0-6.0.pre.129, on Mac OS X 10.15.6 19G73, locale en)
    • Flutter version 1.21.0-6.0.pre.129 at /Users/pedromassango/dev/SDKs/flutter_master
    • Framework revision 30aef0a3b9 (13 hours ago), 2020-07-30 14:20:21 -0700
    • Engine revision a9910e409c
    • Dart version 2.10.0 (build 2.10.0-1.0.dev 24c7666def)

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at /Users/pedromassango/Library/Android/sdk
    • Platform android-30, build-tools 30.0.1
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.6, Build version 11E708
    • CocoaPods version 1.9.3

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

[!] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] IntelliJ IDEA Community Edition (version 2020.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 47.1.4
    • Dart plugin version 202.6397.47

[✓] Connected device (2 available)
    • Web Server (web) • web-server • web-javascript • Flutter Tools
    • Chrome (web)     • chrome     • web-javascript • Google Chrome 84.0.4147.105

! Doctor found issues in 2 categories

@pedromassango

@pedromassango Can you share what device and what version of iOS you were running? Don't forget to make sure you run your device on iOS 14. I was running it on iPhone XR on the latest iOS 14 Beta 3. Maybe start off by tapping on this link first: https://experiment24.web.app/#/ on iOS14

I tested on Chrome since I don't have a device with iOS 14.

I would recommend to follow up on #61047 for issues related to iOS 14.

@pedromassango

@pedromassango yes, this is an iOS14 related issue. So how do I add it there? Just post link to this issue in this: #61047 thread?

@pedromassango

@pedromassango yes, this is an iOS14 related issue. So how do I add it there? Just post link to this issue in this: #61047 thread?

I already did this. The author will eventually add the issue there.

Added to #61047. It's just a convenience umbrella bug to keep track of our overall progress, so keep the details of individual bugs in their respective issues to avoid noise.

Related Skia issue: https://bugs.chromium.org/p/skia/issues/detail?id=10594

flutter build web --dart-define=FLUTTER_WEB_USE_SKIA=true

code sample

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        floatingActionButton: Container(
            margin: EdgeInsets.symmetric(horizontal: 4),
            padding: EdgeInsets.all(6),
            width: MediaQuery.of(context).size.width * 0.8,
            height: 100,
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(80),
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(80),
              child: TabBar(
                  isScrollable: true,
                  labelColor: Colors.black,
                  unselectedLabelColor: Colors.grey,
                  indicatorColor: Colors.white,
                  indicator: BoxDecoration(
                      shape: BoxShape.rectangle,
                      borderRadius: BorderRadius.all(Radius.circular(30)),
                      color: Colors.white),
                  tabs: [
                    Tab(icon: Icon(Icons.ac_unit)),
                    Tab(icon: Icon(Icons.ac_unit)),
                    Tab(icon: Icon(Icons.ac_unit)),
                    Tab(icon: Icon(Icons.ac_unit)),
                  ]),
            )),
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel master, 1.24.0-4.0.pre.107, on Mac OS X 10.15.7 19H2
    darwin-x64, locale en-GB)
    • Flutter version 1.24.0-4.0.pre.107 at
      /Users/tahatesser/Code/flutter_master
    • Framework revision 35a94f70e1 (7 hours ago), 2020-10-27 23:47:04 -0700
    • Engine revision 64e6599910
    • Dart version 2.11.0 (build 2.11.0-260.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.1, Build version 12A7403
    • CocoaPods version 1.10.0.rc.1

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

[✓] Android Studio (version 4.1)
    • 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
      1.8.0_242-release-1644-b3-6222593)

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

[✓] Connected device (5 available)
    • RMX2001 (mobile)       • 192.168.0.104:5555        • android-arm64  •
      Android 10 (API 29)
    • Taha’s iPhone (mobile) • 00008020-001059882212002E • ios            • iOS
      14.1
    • macOS (desktop)        • macos                     • darwin-x64     • Mac
      OS X 10.15.7 19H2 darwin-x64
    • Web Server (web)       • web-server                • web-javascript •
      Flutter Tools
    • Chrome (web)           • chrome                    • web-javascript •
      Google Chrome 86.0.4240.111

• No issues found!

This should be fixed now.

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.

Navigation Menu

Repository navigation

Rounded rectangles painted badly[ios14][web][skia] #62652

Steps to Reproduce

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Rounded rectangles painted badly[ios14][web][skia] #62652

Description

Steps to Reproduce

Activity

pedromassangocode commented on Jul 31, 2020

tomasbaran commented on Jul 31, 2020

pedromassangocode commented on Jul 31, 2020

tomasbaran commented on Jul 31, 2020

pedromassangocode commented on Jul 31, 2020

jmagman commented on Jul 31, 2020

yjbanov commented on Sep 3, 2020

TahaTesser commented on Oct 28, 2020

yjbanov commented on Mar 2, 2021

github-actions commented on Aug 5, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions