Flutter web with canvaskit on iOS 15 beta
Question
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.
6 answers
solution1
1 ACCPTED 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:
<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
solution2
1 2021-09-25 18:40:31
另一种解决方法是在 iPhone（设置/Safari）上禁用 WebGL 2.0，也可以正常工作。
solution3
1 2021-10-02 11:51:21
Websites that contain Chinese or Japanese characters currently crash on iOS 15 iPad and iOS 15 iPhone; they work fine on iOS 14 iPad, and other platforms (Android, macOS).
Also, neither Safari nor Chrome works on iOS 15. They both show a blank screen without any error messages.
I've tested above using 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. 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.
solution4
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) . This issue should be resolved if you are currently running Flutter 2.7 in the stable channel.
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
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) . This snippet of code needs to be called in the head tag before your main.dart.js is called in the index.html file.
<!-- 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. (Source)
TextStyle(
decoration: TextDecoration.underline,
decorationColor: Colors.white.withOpacity(0.01),
)
CanvasKit Workaround
If these solutions did not help, you can also try disabling CanvasKit as a last resort. (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:
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:
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.
solution5
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.
solution6
0 2022-07-28 17:22:42
The issue is with html renderer. Try using canvaskit for 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";
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.