[web]RawMagnifier does not work in the browser of some devices.

[idetyo]

Steps to reproduce

1.Create a project with the following link
https://api.flutter.dev/flutter/widgets/RawMagnifier-class.html#widgets.RawMagnifier.1
2.flutter run -d chrome(my chrome version is "121.0.6167.160 (Official Build) (64-bit)")
3.open "Developper Tools"(Ctrl+Shift+I)
4.Toggle device toolbar(Ctrl+Shift+M)
5.Select "Pixel 7",etc.
6.Reload the page.

Expected results

The enlarged image is displayed in a red circle.

Actual results

The enlarged image is not displayed in the red circle.

Code sample

Code sample

import 'package:flutter/material.dart';

void main() => runApp(const MagnifierExampleApp());

class MagnifierExampleApp extends StatefulWidget {
  const MagnifierExampleApp({super.key});

  @override
  State<MagnifierExampleApp> createState() => _MagnifierExampleAppState();
}

class _MagnifierExampleAppState extends State<MagnifierExampleApp> {
  Offset dragGesturePosition = Offset.zero;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text('Drag on the logo!'),
              RepaintBoundary(
                child: Stack(
                  children: <Widget>[
                    GestureDetector(
                      onPanUpdate: (DragUpdateDetails details) => setState(
                        () {
                          dragGesturePosition = details.localPosition;
                        },
                      ),
                      child: const FlutterLogo(size: 200),
                    ),
                    Positioned(
                      left: dragGesturePosition.dx,
                      top: dragGesturePosition.dy,
                      child: const RawMagnifier(
                        decoration: MagnifierDecoration(
                          shape: CircleBorder(
                            side: BorderSide(color: Colors.pink, width: 3),
                          ),
                        ),
                        size: Size(100, 100),
                        magnificationScale: 2,
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.0, on Debian GNU/Linux 12 (bookworm) 6.1.64-09049-g010fe86d9eae, locale en_US.UTF-8)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/linux#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[!] Android Studio (not installed)
[✓] VS Code (version 1.86.1)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 2 categories.

[danagbemava-nc]

This is a duplicate of #109207.

The magnifier is a BackdropFilter with an ImageFilter its core which currently doesn't work with the html renderer (which is the default for mobile devices).

Kindly follow up in the original issue for updates.

Closing from here.

Thank you

[github-actions]

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.