Flutter web iOS 15 beta
[英]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). 
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.屏幕显示为空白，并且在 Safari 的开发人员控制台中没有任何错误。 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.我什至不知道这是一个 Flutter 错误，它被一些关于 iOS15 的特殊性所发现，或者它是否是一个实际的 iOS15 错误。 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. 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
I have found this issue: https://github.com/flutter/flutter/issues/89655 Right now I fixed with this code:我发现了这个问题： 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>
Then when building your app, use: flutter build web --release --web-renderer auto然后在构建应用程序时，使用： 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
Websites that contain Chinese or Japanese characters currently crash on iOS 15 iPad and iOS 15 iPhone;包含中文或日文字符的网站目前在 iOS 15 iPad 和 iOS 15 iPhone 上崩溃； they work fine on iOS 14 iPad, and other platforms (Android, macOS).它们在 iOS 14 iPad 和其他平台（Android、macOS）上运行良好。
Also, neither Safari nor Chrome works on iOS 15. They both show a blank screen without any error messages.此外，Safari 和 Chrome 都不能在 iOS 15 上运行。它们都显示一个空白屏幕，没有任何错误消息。
I've tested above using html: flutter build web --web-renderer html --release我已经使用 html 在上面进行了测试： flutter build web --web-renderer html --release
A temp workaround so far is to add an "almost transparent" underline to Texts:到目前为止的临时解决方法是向文本添加“几乎透明”的下划线：
TextStyle(
decoration: TextDecoration.underline,
decorationColor: Colors.white.withOpacity(0.01),
)
Passing an actual transparent color causes the underline to render in black for me, so I'm just using a very faint color here.传递一个实际的透明颜色会导致下划线为我呈现黑色，所以我在这里只使用一种非常微弱的颜色。
I'm using a DefaultTextStyle widget to modify it for most texts, and manually adding it to a few particular ones that didn't cover.我正在使用DefaultTextStyle小部件为大多数文本修改它，并手动将其添加到一些未覆盖的特定文本中。 During debugging, I made the underline color visible, so I can observe which texts do not have underline yet.在调试过程中，我让下划线颜色可见，这样我就可以观察哪些文本还没有下划线。 Once I make sure they all have underline, I turn the color off for release mode.一旦我确定它们都有下划线，我就会关闭发布模式的颜色。
解决方案4
1 2021-10-08 19:20:47
Recently it was discovered that the cause of this issue was WebGL 2.0 on Safari/WebKit (Source) .最近发现这个问题的原因是 Safari/WebKit (Source)上的 WebGL 2.0。 This issue should be resolved if you are currently running Flutter 2.7 in the stable channel.如果您当前在稳定频道中运行 Flutter 2.7，则应该解决此问题。
Each source link in this answer leads you to the actual comments and respective authors of these workarounds at https://github.com/flutter/flutter/issues/89655此答案中的每个源链接都会引导您在https://github.com/flutter/flutter/issues/89655上找到这些解决方法的实际评论和各自的作者
Best Solution最佳解决方案
Since disabling WebGL 2.0 through Safari's Experimental Features will only affect your own computer AND switching to the master channel is not a viable solution for apps in production, you'll need to tell the browser that Flutter's engine does not support WebGL 2.0 on Safari (Source) .由于通过 Safari 的实验功能禁用 WebGL 2.0 只会影响您自己的计算机，并且切换到主频道对于生产中的应用程序来说不是可行的解决方案，因此您需要告诉浏览器 Flutter 的引擎不支持 Safari 上的 WebGL 2.0 （来源) 。 This snippet of code needs to be called in the head tag before your main.dart.js is called in the index.html file.在 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>
TextStyle Workaround文本样式解决方法
The previously proposed solution to this issue was to set a slightly transparent underline for all text in your app by using the DefaultTextStyle widget.之前针对此问题提出的解决方案是使用DefaultTextStyle小部件为应用中的所有文本设置略微透明的下划线。 (Source) （来源）
TextStyle(
decoration: TextDecoration.underline,
decorationColor: Colors.white.withOpacity(0.01),
)
CanvasKit Workaround CanvasKit 解决方法
If these solutions did not help, you can also try disabling CanvasKit as a last resort.如果这些解决方案没有帮助，您也可以尝试禁用 CanvasKit 作为最后的手段。 (Source) （来源）
<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>
For this workaround to work you will need to set the web-renderer to auto when running or building the project in the terminal:要使此解决方法起作用，您需要在终端中运行或构建项目时将 Web 渲染器设置为自动：
flutter build web --release --web-renderer auto
You might have to replace some widgets that only work nicely with the CanvasKit renderer since this workaround will force Safari 15 to use the HTML renderer:您可能需要替换一些只能与 CanvasKit 渲染器配合使用的小部件，因为此解决方法将强制 Safari 15 使用 HTML 渲染器：
import 'dart:js' as js;
// ** //
bool isCanvasKit() => js.context['flutterCanvasKit'] != null;
Widget dynamicText = isCanvasKit()
? Text("CanvasKit")
: Text("HTML");
If any of these solutions fixed your issue, please consider marking it as accepted.如果这些解决方案中的任何一个解决了您的问题，请考虑将其标记为已接受。
解决方案5
0 2021-10-07 09:34:28
This issue was recently fixed in this merge request and is now on the master channel.这个问题最近在这个合并请求中得到修复，现在在主频道上。 It will most likely land on more stable channels in the coming days.它很可能会在未来几天登陆更稳定的频道。
See these instructions for switching channel and then rebuild your application with your new flutter version and it should work.看到这些指令切换频道，然后用你的新版本扑重建您的应用程序，它应该工作。
解决方案6
0 2022-07-28 17:22:42
The issue is with html renderer.问题在于 html 渲染器。 Try using canvaskit for Safari.尝试将 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.