[web ]Tab label shows white and text overflows when using long text

[deakjahn]

Steps to Reproduce

1. Put a few tabs into a DefaultTabController with relatively long labels.
2. Make sure you reduce the width of your browser window so that the tabs have no room to display in full.

Expected results:

Correct display.

Actual results:

Labels with overflown texts will show an extra white background.

Doc

``` [√] Flutter (Channel beta, 1.18.0-11.1.pre, on Microsoft Windows [Version 10.0.18363.836], locale en-US) • Flutter version 1.18.0-11.1.pre at E:\Android\flutter-beta • Framework revision 2738a1148b (10 days ago), 2020-05-13 15:24:36 -0700 • Engine revision ef9215ceb2 • Dart version 2.9.0 (build 2.9.0-8.2.beta) [√] Android toolchain - develop for Android devices (Android SDK version 29.0.1) • Android SDK at e:\Android\Sdk • Platform android-29, build-tools 29.0.1 • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04) • All Android licenses accepted. [√] Chrome - develop for the web • CHROME_EXECUTABLE = e:\Android\chrome.bat [√] Android Studio (version 3.6) • Android Studio at C:\Program Files\Android\Android Studio • Flutter plugin version 45.1.1 • Dart plugin version 192.8052 • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04) [√] Connected device (2 available) • Web Server • web-server • web-javascript • Flutter Tools • Chrome • chrome • web-javascript • Google Chrome 81.0.4044.138 • No issues found! ```

[iapicca]

Hi @deakjahn I can see the behaviour you are describing with the latest master screenshot

code sample

```dart import 'package:flutter/material.dart'; /// from [gist.github.com/iapicca/780826bfe3196c473813a9fad711e4cd] void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context)=> MaterialApp( home: HomePage(), ); } class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State with SingleTickerProviderStateMixin { static final GlobalKey _tabBarKey = GlobalKey(debugLabel: 'Tab Bar'); static const _longText = 'loooooooooooooooong text'; static const List _icons = [ Icon(Icons.home), Icon(Icons.people), Icon(Icons.event_note), ]; TabController _tabController; List _widgets; @override void initState() { super.initState(); _tabController = TabController(length: _icons.length, vsync: this); _widgets = [ for (Icon _icon in _icons) Center( child: _icon, ), ]; } @override void dispose() { _tabController?.dispose(); _tabController = null; super.dispose(); } @override Widget build(BuildContext context) => DefaultTabController( length: _icons.length, child: Material( child: NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) => [ SliverAppBar( backgroundColor: Colors.white, expandedHeight: MediaQuery.of(context).size.height * .3, pinned: true, flexibleSpace: FlexibleSpaceBar( centerTitle: true, title: TabBar( key: _tabBarKey, controller: _tabController, tabs:[ for (Icon _icon in _icons) Tab( text: _longText, icon: _icon, ), ], labelColor: Colors.red, unselectedLabelColor: Colors.blue, indicatorPadding: const EdgeInsets.all(5.0), indicatorColor: Colors.grey, ), ), ), ], body: TabBarView( controller: _tabController, children: _widgets ), ), ), ); } ```

but it seems to behave normally with the latest master on mobile

doctor

```console [✓] Flutter (Channel master, 1.19.0-2.0.pre.143, on Mac OS X 10.15.4 19E287, locale en-GB) • Flutter version 1.19.0-2.0.pre.143 at /Users/nevercode/development/flutter_master • Framework revision 9d58a87066 (2 days ago), 2020-05-22 22:37:01 -0700 • Engine revision 9ce1e5c5c7 • Dart version 2.9.0 (build 2.9.0-10.0.dev 7706afbcf5) [✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2) • Android SDK at /Users/nevercode/Library/Android/sdk • Platform android-29, build-tools 29.0.2 • 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.3.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 11.3.1, Build version 11C504 • CocoaPods version 1.9.0 [✓] 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 45.1.1 • Dart plugin version 192.7761 • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211) [✓] VS Code • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.10.2 [✓] Connected device (3 available) • Pixel 3a • 965AY0WP5C • android-arm64 • Android 10 (API 29) • Web Server • web-server • web-javascript • Flutter Tools • Chrome • chrome • web-javascript • Google Chrome 81.0.4044.138 • No issues found! ```

Thank you

[mariamhas]

Expected behavior by customer: render with truncated Text widget

[deakjahn]

@mariamhas A DomCanvas issue, CanvasKit works all right.

[TahaTesser]

Preview

Shows white background in HTML when running on beta channel, it seems to be fixed on the dev and master.

Text isn't truncated in HTML or canvaskit

code sample

```dart import 'package:flutter/material.dart'; /// from [gist.github.com/iapicca/780826bfe3196c473813a9fad711e4cd] void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) => MaterialApp( home: HomePage(), ); } class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State with SingleTickerProviderStateMixin { static final GlobalKey _tabBarKey = GlobalKey(debugLabel: 'Tab Bar'); static const _longText = 'loooooooooooooooong text'; static const List _icons = [ Icon(Icons.home), Icon(Icons.people), Icon(Icons.event_note), ]; TabController _tabController; List _widgets; @override void initState() { super.initState(); _tabController = TabController(length: _icons.length, vsync: this); _widgets = [ for (Icon _icon in _icons) Center( child: _icon, ), ]; } @override void dispose() { _tabController?.dispose(); _tabController = null; super.dispose(); } @override Widget build(BuildContext context) => DefaultTabController( length: _icons.length, child: Material( child: NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) => [ SliverAppBar( backgroundColor: Colors.white, expandedHeight: MediaQuery.of(context).size.height * .3, pinned: true, flexibleSpace: FlexibleSpaceBar( centerTitle: true, title: TabBar( key: _tabBarKey, controller: _tabController, tabs: [ for (Icon _icon in _icons) Tab( text: _longText, icon: _icon, ), ], labelColor: Colors.red, unselectedLabelColor: Colors.blue, indicatorPadding: const EdgeInsets.all(5.0), indicatorColor: Colors.grey, ), ), ), ], body: TabBarView(controller: _tabController, children: _widgets), ), ), ); } ```

flutter doctor -v

```bash [✓] Flutter (Channel beta, 1.25.0-8.3.pre, on macOS 11.1 20C69 darwin-x64, locale en-GB) • Flutter version 1.25.0-8.3.pre at /Users/tahatesser/Code/flutter_beta • Framework revision 5d36f2e7f5 (5 days ago), 2021-01-14 15:57:49 -0800 • Engine revision 7a8f8ca02c • Dart version 2.12.0 (build 2.12.0-133.7.beta) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3) • Android SDK at /Volumes/Extreme/SDK • Platform android-30, build-tools 30.0.3 • ANDROID_HOME = /Volumes/Extreme/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-6915495) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer • Xcode 12.3, Build version 12C33 • CocoaPods version 1.10.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-6915495) [✓] VS Code (version 1.52.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.18.1 [✓] Connected device (3 available) • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64 • Android 10 (API 29) • Taha’s iPad (mobile) • 00008020-000255113EE8402E • ios • iOS 14.3 • Chrome (web) • chrome • web-javascript • Google Chrome 87.0.4280.141 • No issues found! ``` ```bash [✓] Flutter (Channel dev, 1.26.0-8.0.pre, on macOS 11.1 20C69 darwin-x64, locale en-GB) • Flutter version 1.26.0-8.0.pre at /Users/tahatesser/Code/flutter_dev • Framework revision b9d06fffb2 (12 days ago), 2021-01-07 18:36:48 -0800 • Engine revision 42a8d4c681 • Dart version 2.12.0 (build 2.12.0-179.0.dev) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3) • Android SDK at /Volumes/Extreme/SDK • Platform android-30, build-tools 30.0.3 • ANDROID_HOME = /Volumes/Extreme/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-6915495) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 12.3) • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer • Xcode 12.3, Build version 12C33 • CocoaPods version 1.10.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-6915495) [✓] VS Code (version 1.52.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.18.1 [✓] Connected device (4 available) • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64 • Android 10 (API 29) • Taha’s iPad (mobile) • 00008020-000255113EE8402E • ios • iOS 14.3 • macOS (desktop) • macos • darwin-x64 • macOS 11.1 20C69 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 87.0.4280.141 • No issues found! ``` ```bash [✓] Flutter (Channel master, 1.26.0-2.0.pre.419, on macOS 11.1 20C69 darwin-x64, locale en-GB) • Flutter version 1.26.0-2.0.pre.419 at /Users/tahatesser/Code/flutter_master • Framework revision 913d5933c1 (4 hours ago), 2021-01-19 22:34:03 -0800 • Engine revision b58dbc88fc • Dart version 2.12.0 (build 2.12.0-240.0.dev) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3) • Android SDK at /Volumes/Extreme/SDK • Platform android-30, build-tools 30.0.3 • ANDROID_HOME = /Volumes/Extreme/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-6915495) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer • Xcode 12.3, Build version 12C33 • CocoaPods version 1.10.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-6915495) [✓] VS Code (version 1.52.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.18.1 [✓] Connected device (4 available) • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64 • Android 10 (API 29) • Taha’s iPad (mobile) • 00008020-000255113EE8402E • ios • iOS 14.3 • macOS (desktop) • macos • darwin-x64 • macOS 11.1 20C69 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 87.0.4280.141 • No issues found! ```

[darshankawar]

Verified this issue using latest versions and observed that the behavior still persists using html renderer.

Using canvaskit, it renders properly as below:

stable, master flutter doctor -v

``` [✓] Flutter (Channel stable, 3.3.8, on macOS 12.2.1 21D62 darwin-x64, locale en-GB) • Flutter version 3.3.8 on channel stable at /Users/dhs/documents/fluttersdk/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 52b3dc25f6 (25 hours ago), 2022-11-09 12:09:26 +0800 • Engine revision 857bd6b74c • Dart version 2.18.4 • DevTools version 2.15.0 [!] Xcode - develop for iOS and macOS (Xcode 12.3) • Xcode at /Applications/Xcode.app/Contents/Developer ! Flutter recommends a minimum Xcode version of 13. Download the latest version or update via the Mac App Store. • CocoaPods version 1.11.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] VS Code (version 1.62.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.21.0 [✓] Connected device (5 available) • SM G975F (mobile) • RZ8M802WY0X • android-arm64 • Android 11 (API 30) • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios • iOS 14.4.1 18D61 • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator) • macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.4 19E2269 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 98.0.4758.80 [✓] HTTP Host Availability • All required HTTP hosts are available ! Doctor found issues in 1 category. [!] Flutter (Channel master, 3.6.0-7.0.pre.18, on macOS 12.2.1 21D62 darwin-x64, locale en-GB) • Flutter version 3.6.0-7.0.pre.18 on channel master at /Users/dhs/documents/fluttersdk/flutter ! Warning: `flutter` on your path resolves to /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter. Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path. ! Warning: `dart` on your path resolves to /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter. Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision 2921ca0c48 (2 hours ago), 2022-11-21 21:43:26 -0500 • Engine revision 8dd8e092e4 • Dart version 2.19.0 (build 2.19.0-415.0.dev) • DevTools version 2.19.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. [!] Xcode - develop for iOS and macOS (Xcode 12.3) • Xcode at /Applications/Xcode.app/Contents/Developer ! Flutter recommends a minimum Xcode version of 13. Download the latest version or update via the Mac App Store. • CocoaPods version 1.11.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] VS Code (version 1.62.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.21.0 [✓] Connected device (5 available) • SM G975F (mobile) • RZ8M802WY0X • android-arm64 • Android 11 (API 30) • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios • iOS 14.4.1 18D61 • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator) • macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.4 19E2269 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 98.0.4758.80 [✓] HTTP Host Availability • All required HTTP hosts are available ! Doctor found issues in 1 category. ```

[ocinon]

The issue persists on web mobile. Is there any workaround?

[Thesh725]

The issue persists on web mobile. Is there any workaround?

Did you ever find a workaround? I'm facing this issue specifically on web mobile as well.

[ocinon]

It seems I did. I have to look into the source code to find it, though.

[ocinon]

The issue persists on web mobile. Is there any workaround?

Did you ever find a workaround? I'm facing this issue specifically on web mobile as well.

Here we go, this was my "temporary" fix: Tab(child: Text('Settings', overflow: TextOverflow.ellipsis, maxLines: 1)),

[Thesh725]

The issue persists on web mobile. Is there any workaround?

Did you ever find a workaround? I'm facing this issue specifically on web mobile as well.

Here we go, this was my "temporary" fix: Tab(child: Text('Settings', overflow: TextOverflow.ellipsis, maxLines: 1)),

Thank you so much, much appreciated :)