Search code examples
fluttercanvaskit

Flutter web with canvaskit on iOS 15 beta


I decided to try iOS15 beta and to my surprise a Flutter Web application am testing will not run with canvas kit renderer (it runs perfectly fine with the html renderer). The screen appears blank and I get no errors in Safari's developer console. Does anybody else have this issue? Any clues to what might be happening? I don't even know if this is a Flutter bug uncovered by some specificity about iOS15 or if it is an actual iOS15 bug. The native app runs perfectly well. The web app with canvas kit also runs perfectly well on every other browser I threw it at, except, obviously for Internet Explorer (this includes Android with Chrome, Android with Firefox, several browsers on Linux, several browsers on Windows, and even several browsers on iOS 14.x. On the other hand, I am running other web assembly apps on iOS 15.


Solution

  • I have found this issue: https://github.com/flutter/flutter/issues/89655 Right now I fixed with this code:

    <head>
      <!-- * Safari Renderer * -->
      <script src="https://unpkg.com/[email protected]/platform.js"></script>
      <script>
        if (platform.name.toLowerCase() == "safari" && parseInt(platform.version.split(".")[0]) >= 15) {
            window.flutterWebRenderer = "html";
        } else {
            // Optional, default is `auto`
            window.flutterWebRenderer = "canvaskit";
        }
      </script>
      ...
    </head>
    <body>
      ...
      <!-- * Initialize Website * -->
      <script src="main.dart.js" type="application/javascript"></script>
    </body>
    

    Then when building your app, use: flutter build web --release --web-renderer auto