clipBehavior property not working properly in mobile browsers

Viewed 22

When I use the clipBehavior property from a Stack widget, it works fine on Android/iOS/Web/MacOS.

But when I try it in a mobile browser like Chrome or Brave, it is not clipping fine (Look at the borders in the images below).

Is it a Flutter issue? I am using the latest version (3.3.2).

CODE

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

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Center(
        child: Stack(
          alignment: Alignment.center,
          clipBehavior: Clip.antiAliasWithSaveLayer,
          children: [
            Material(
              child: Container(
                height: 200,
                width: 150,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  border: Border.all(width: 2),
                  color: Colors.grey[200],
                ),
                child: const Center(
                  child: Text(
                    'Any text example',
                    style: TextStyle(fontSize: 20),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
            ),
            Positioned(
              top: 20,
              child: Container(
                height: 400,
                width: 155,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: const FractionalOffset(0.0, 1.0),
                    end: const FractionalOffset(0.0, 0.0),
                    stops: const [0.87, 1],
                    colors: [Colors.white, Colors.white.withOpacity(0.0)],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

Android/iOS/Web/MacOS:

enter image description here

Mobile web browsers: enter image description here

0 Answers
Related