堆棧內存溢出
  簡體   English   中英

Flutter web iOS 15 beta

[英]Flutter web with canvaskit on iOS 15 beta

 原文  2021-09-06 10:52:01  0   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