Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

transparentBackground parameter doesn't work as expected on desktop (macOS and Windows) #2475

Open
1 of 2 tasks
HarryToo opened this issue Dec 24, 2024 · 3 comments
Open
1 of 2 tasks
Labels
bug Something isn't working

Comments

@HarryToo
Copy link

HarryToo commented Dec 24, 2024

Is there an existing issue for this?

  • I have searched the existing issues

Current Behavior

截屏2024-12-24 16 53 14

Expected Behavior

The background of InAppWebView is transparent, thus showing the red color set in Container.

Steps with code example to reproduce

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

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

Future<void> _initWindow() async {
  const windowOptions = WindowOptions(
    center: true,
    title: 'InAppWebView Demo',
  );
  await windowManager.waitUntilReadyToShow(windowOptions, () async {
    await windowManager.show();
    await windowManager.focus();
  });
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'InAppWebView Demo',
      home: Scaffold(
        body: Container(
          color: Colors.red,
          child: InAppWebView(
            initialData: InAppWebViewInitialData(data: """
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>InAppWebView Demo</title>
                <style> html,body { background-color: transparent; } </style>
            </head>
            <body>
              Test
            </body>
            </html>"""),
            initialSettings: InAppWebViewSettings(
              transparentBackground: true,
              isInspectable: true,
            ),
          ),
        ),
      ),
    );
  }
}


Stacktrace/Logs

[MacOSInAppWebViewWidget] (macOS) MacOSInAppWebViewWidget ID 0 calling "onWebViewCreated" using []
[MacOSInAppWebViewController] (macOS) WebView ID 0 calling "onUpdateVisitedHistory" using {url: about:blank, isReload: null}
[MacOSInAppWebViewController] (macOS) WebView ID 0 calling "onLoadStart" using {url: about:blank}
[MacOSInAppWebViewController] (macOS) WebView ID 0 calling "onPageCommitVisible" using {url: about:blank}
[MacOSInAppWebViewController] (macOS) WebView ID 0 calling "onProgressChanged" using {progress: 100}
[MacOSInAppWebViewController] (macOS) WebView ID 0 calling "onLoadStop" using {url: about:blank}
[MacOSInAppWebViewController] (macOS) WebView ID 0 calling "onTitleChanged" using {title: Document}

Flutter version

v3.27.1

Operating System, Device-specific and/or Tool

macOS 15.2, XCode 16.2, Windows 24H2 26100.2605

Plugin version

v6.1.5, v6.2.0-beta.2

Additional information

The app window briefly appears red and then is immediately covered by the white background of the InAppWebView.

Self grab

  • I'm ready to work on this issue!
@HarryToo HarryToo added the bug Something isn't working label Dec 24, 2024
@HarryToo HarryToo changed the title [macOS] transparentBackground doesn't work as expected transparentBackground parameter doesn't work as expected Dec 25, 2024
@HarryToo HarryToo changed the title transparentBackground parameter doesn't work as expected transparentBackground parameter doesn't work as expected on desktop Dec 25, 2024
@HarryToo HarryToo changed the title transparentBackground parameter doesn't work as expected on desktop transparentBackground parameter doesn't work as expected on desktop (macOS and Windows) Dec 25, 2024
@m-r-davari
Copy link

I have same issue, any update?

@m-r-davari
Copy link

m-r-davari commented Jan 5, 2025

Im using flutter_inappwebview for my SDK, and this bug is blocker for me, @HarryToo could you please set it to high priority?

@HarryToo
Copy link
Author

HarryToo commented Jan 9, 2025

Im using flutter_inappwebview for my SDK, and this bug is blocker for me, @HarryToo could you please set it to high priority?

Sorry, I don't have permission to add priority labels, @pichillilorenzo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants