堆栈内存溢出
  繁体   English   中英

Flutter web iOS 15 beta

[英]Flutter web with canvaskit on iOS 15 beta

 原文  2021-09-06 10:52:01  2   6    flutter

问题描述

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). 屏幕显示为空白，并且在 Safari 的开发人员控制台中没有任何错误。 还有其他人有这个问题吗？ 关于可能发生的事情的任何线索？ 我什至不知道这是一个 Flutter 错误，它被一些关于 iOS15 的特殊性所发现，或者它是否是一个实际的 iOS15 错误。 本机应用程序运行良好。 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在 iOS 14.x 上。另一方面，我正在 iOS 15 上运行其他 web 装配应用程序。

6 个解决方案

解决方案1
 1 已采纳  2021-09-17 15:01:49

我发现了这个问题： https : //github.com/flutter/flutter/issues/89655现在我用这个代码修复了：

<head>
  <!-- * Safari Renderer * -->
  <script src="https://unpkg.com/platform@1.3.5/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>

然后在构建应用程序时，使用： flutter build web --release --web-renderer auto

解决方案2
 1  2021-09-25 18:40:31

另一种解决方法是在 iPhone（设置/Safari）上禁用 WebGL 2.0，也可以正常工作。

解决方案3
 1  2021-10-02 11:51:21

包含中文或日文字符的网站目前在 iOS 15 iPad 和 iOS 15 iPhone 上崩溃； 它们在 iOS 14 iPad 和其他平台（Android、macOS）上运行良好。

此外，Safari 和 Chrome 都不能在 iOS 15 上运行。它们都显示一个空白屏幕，没有任何错误消息。

我已经使用 html 在上面进行了测试： flutter build web --web-renderer html --release

到目前为止的临时解决方法是向文本添加“几乎透明”的下划线：

TextStyle(
  decoration: TextDecoration.underline,
  decorationColor: Colors.white.withOpacity(0.01),
)

传递一个实际的透明颜色会导致下划线为我呈现黑色，所以我在这里只使用一种非常微弱的颜色。

我正在使用DefaultTextStyle小部件为大多数文本修改它，并手动将其添加到一些未覆盖的特定文本中。 在调试过程中，我让下划线颜色可见，这样我就可以观察哪些文本还没有下划线。 一旦我确定它们都有下划线，我就会关闭发布模式的颜色。

解决方案4
 1  2021-10-08 19:20:47

最近发现这个问题的原因是 Safari/WebKit (Source)上的 WebGL 2.0。 如果您当前在稳定频道中运行 Flutter 2.7，则应该解决此问题。

此答案中的每个源链接都会引导您在https://github.com/flutter/flutter/issues/89655上找到这些解决方法的实际评论和各自的作者

最佳解决方案

由于通过 Safari 的实验功能禁用 WebGL 2.0 只会影响您自己的计算机，并且切换到主频道对于生产中的应用程序来说不是可行的解决方案，因此您需要告诉浏览器 Flutter 的引擎不支持 Safari 上的 WebGL 2.0 （来源) 。 在 index.html 文件中调用 main.dart.js 之前，需要在head标记中调用这段代码。

<!-- Apple WebGL 2.0 fix (https://github.com/flutter/flutter/issues/89655#issuecomment-919685843) -->
<!-- TODO: Remove when https://github.com/flutter/engine/pull/29038 is merged to stable -->
<script src="https://unpkg.com/platform@1.3.5/platform.js"></script>
<script type="text/javascript">
   let isSafari = /^((?!chrome|android).)*safari/i.test(platform.ua);
   if (isSafari) {
      HTMLCanvasElement.prototype.getContext = function (orig) {
         return function (type) {
            return type !== "webgl2" ? orig.apply(this, arguments) : null
         }
      }(HTMLCanvasElement.prototype.getContext)
   }
</script>

文本样式解决方法

之前针对此问题提出的解决方案是使用DefaultTextStyle小部件为应用中的所有文本设置略微透明的下划线。 （来源）

TextStyle(
  decoration: TextDecoration.underline,
  decorationColor: Colors.white.withOpacity(0.01),
)

CanvasKit 解决方法

如果这些解决方案没有帮助，您也可以尝试禁用 CanvasKit 作为最后的手段。 （来源）

<head>
  <!-- * Safari Renderer * -->
  <script src="https://unpkg.com/platform@1.3.5/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>

要使此解决方法起作用，您需要在终端中运行或构建项目时将 Web 渲染器设置为自动：

flutter build web --release --web-renderer auto

您可能需要替换一些只能与 CanvasKit 渲染器配合使用的小部件，因为此解决方法将强制 Safari 15 使用 HTML 渲染器：

import 'dart:js' as js;
// ** //
bool isCanvasKit() => js.context['flutterCanvasKit'] != null;
Widget dynamicText = isCanvasKit() 
   ? Text("CanvasKit")
   : Text("HTML");

如果这些解决方案中的任何一个解决了您的问题，请考虑将其标记为已接受。

解决方案5
 0  2021-10-07 09:34:28

这个问题最近在这个合并请求中得到修复，现在在主频道上。 它很可能会在未来几天登陆更稳定的频道。

看到这些指令切换频道，然后用你的新版本扑重建您的应用程序，它应该工作。

解决方案6
 0  2022-07-28 17:22:42

问题在于 html 渲染器。 尝试将 canvaskit 用于 Safari。

<script src="https://unpkg.com/platform@1.3.5/platform.js"></script>
<script type="text/javascript">
if (platform.name.toLowerCase() == "safari" ) {
    window.flutterWebRenderer = "canvaskit";
} else {
    window.flutterWebRenderer = "html";
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在 Flutter Web 中使用 Skia / CanvasKit？ 如何在 Flutter Web CanvasKit 上启用自定义图标？ Flutter web canvaskit 渲染器未显示网络图像 如何检测 Flutter web CanvasKit 或 HTML 渲染器？ flutter web 交替/减小 canvaskit.wasm 的大小 Latex 不使用 canvaskit flutter 渲染 基于 CanvasKit 的 Flutter web 应用程序可以嵌入到其他（非 Flutter）web 应用程序/网站中吗？ Flutter web 渲染器（不是 CanvasKit）：嵌套 Y 轴旋转导致子部件消失 Flutter beta hot reload in VSCode works for web but not iOS and Android (which works in Android studio) iOS 15 预热期间 Flutter 处于什么 AppLifecycleState？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM