[Web][iOS]: Text field selection with `obscuredText: true` has grey selection

[moazelshebly]

Steps to Reproduce

1. Use a browser on any iOS device and navigate to https://www.flutterfolio.com or https://app.novospace.com.
2. Type something in the password field.
3. Double-tap the password text to select it.

Expected results:
Only the written text should be selected and nothing else.

Actual results:
There is a weird visual grey-highlighted layer in addition to the text selection layer.

Note: This doesn't reproduce on android emulators but I did not test on a real device.

Screenshots

flutter folio	my project

|

[maheshj01]

Hi @moazelshebly, Thanks for filing the issue. I am able to reproduce the issue on IOS web with both canvaskit and HTML renderer and it works fine on the ios mobile app and is reproducible on both stable and the master channel.
This issue is IOS-specific and works fine on Android. With obscure text set to true TextSelection has grey Overlay which overflows

IOS web ❌	IOS mobile ✅
Screen.Recording.2022-03-11.at.2.18.04.PM.mov	Screen.Recording.2022-03-11.at.2.16.12.PM.mov

✅ : No Issue ❌: Issue reproduced

Note that the grey overlay is also present for normal text on web overlapping the blue overlay

Web (Actual)	Mobile (Expected)

Here's a deployed sample app (default renderer) from the latest stable channel https://textfield.netlify.app/ for quick reproduction.

flutter doctor -v (mac)

[✓] Flutter (Channel stable, 2.10.3, on macOS 12.1 21C52 darwin-arm, locale en-GB)
    • Flutter version 2.10.3 at /Users/mahesh/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7e9793dee1 (20 hours ago), 2022-03-02 11:23:12 -0600
    • Engine revision bd539267b4
    • Dart version 2.16.1
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.10.2

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

[✓] Android Studio (version 4.2)
    • 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.8+10-b944.6916264)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • Redmi K20 Pro (mobile) • 192.168.1.5:5555 • android-arm64  • Android 11 (API 30)
    • macOS (desktop)        • macos            • darwin-arm64   • macOS 12.1 21C52 darwin-arm
    • Chrome (web)           • chrome           • web-javascript • Google Chrome 99.0.4844.51

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

• No issues found!

[✓] Flutter (Channel master, 2.11.0-0.0.pre.836, on macOS 12.2.1 21D62 darwin-arm, locale en-GB)
    • Flutter version 2.11.0-0.0.pre.836 at /Users/mahesh/Documents/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 340d1ac40f (2 days ago), 2022-03-09 03:45:21 -0500
    • Engine revision 621c88dc2d
    • Dart version 2.17.0 (build 2.17.0-182.0.dev)
    • DevTools version 2.11.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! CocoaPods 1.10.2 out of date (1.11.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your
        plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

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

[✓] Android Studio (version 4.2)
    • 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.8+10-b944.6916264)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • iPhone 13 (mobile) • 3484B4E8-D7BB-40B0-96BF-97334A7F6CB6 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-15-2 (simulator)
    • macOS (desktop)    • macos                                • darwin-arm64   • macOS 12.2.1 21D62
      darwin-arm
    • Chrome (web)       • chrome                               • web-javascript • Google Chrome
      99.0.4844.51

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

! Doctor found issues in 1 category.

deployed code sample

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Text Input Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isObscure = false;
  bool isMultiLine = false;

  Widget header(String txt, {double fontSize = 24}) {
    return Text(
      txt,
      style: TextStyle(fontSize: fontSize),
    );
  }

  Widget trailing(String subTitle, bool value, Function(bool) onChanged) {
    return ListTile(
      trailing: Switch(value: value, onChanged: onChanged),
      title: Text('$subTitle'),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 24.0),
              child: header('Deployed using Stable 2.10.3'),
            ),
            trailing('Obscure', isObscure, (x) {
              if (x) {
                isMultiLine = false;
              }
              setState(() {
                isObscure = !isObscure;
              });
            }),
            trailing('multiLine', isMultiLine, (x) {
              if (x) {
                isObscure = false;
              }
              setState(() {
                isMultiLine = !isMultiLine;
              });
            }),
            const SizedBox(
              height: 100,
            ),
            TextField(
              obscureText: isObscure,
              maxLines: isMultiLine ? null : 1,
              decoration: const InputDecoration(
                hintText: 'TextField',
              ),
            ),
            TextFormField(
              obscureText: isObscure,
              maxLines: isMultiLine ? null : 1,
              decoration: const InputDecoration(
                hintText: 'TextFormField',
              ),
            ),
            
          ],
        ),
      ),
    );
  }
}