[Web] Opening a flutter webapp on mobile and zooming the webview with pinch gestures, breaks the loaded website

[lore-co]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

• Create a simple flutter webapp like in the code example below

• host it and open it through a mobile device

• pinch to zoom

• the whole app breaks and zoom also out of bonds.

video_2024-12-12_14-53-43.mp4

Expected Behavior

The zoom should only cover the app boundaries, and not go offscreen.

Steps with code example to reproduce

Steps with code example to reproduce

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
          appBar: AppBar(),
          body: InAppWebView(
            onWebViewCreated: (controller) {
              controller.loadUrl(
                urlRequest: URLRequest(
                  url: WebUri('https://flutter.dev/'),
                ),
              );
            },
          )),
    );
  }
}

Stacktrace/Logs

Stacktrace/Logs

<Replace this line by pasting your stacktrace or logs here>

Flutter version

v3.24.5

Operating System, Device-specific and/or Tool

Chrome browser, Opera browser

Plugin version

v.6.1.5

Additional information

No response

Self grab

• I'm ready to work on this issue!

[pichillilorenzo]

It seems to be more an issue of the Flutter native Platform Views, as on web platform, this plugin just use iframe html elements (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe).
Are you able to reproduce the same issue with other plugins using platform views on web? Such as the webview_flutter or something similar?

[lore-co]

It seems to be more an issue of the Flutter native Platform Views, as on web platform, this plugin just use iframe html elements (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe). Are you able to reproduce the same issue with other plugins using platform views on web? Such as the webview_flutter or something similar?

Unluckily Flutter's own webview plugin doesn't work on web, hence the reason I decided to use yours.

After more investigations I'd say so by the way.

It' s a pity we have bugs like these when Flutter Web is declared stable.

flutter/flutter#97305