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:

