kboy 2021/11/07に更新

iOS15のSafariやChromeでFlutterWebで作られたサイトを見ると、正常に表示できない問題があります。弊社のCodeboy ( codeboy.jp )やFlutter大学のwebページもFlutterWebですので、正常に表示できなくて困っています。

一応、以下のツイートや記事の方法で応急処置はできるようです。

設定 > Safari > 詳細 > Experimental Features > GPU Process: Canvas Rendering」がデフォルトでオンになってて、これをオフにしたら正常に表示されるようになった

ただ、端末の設定をいじる必要があるので、全てのユーザーにやってもらうのは現実的ではありません。
日々アプデがあるかもしれないので、わかったことはこのスクラップにまとめます。

kboy 2021/11/07

試したこと

すでにissueには上がっていて、解決策と思われるコメントがありましたので、以下を試しました。

<!-- 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>

これをindex.htmlに追記するというものです。

CodeBoyでやってみましたが、直りませんでした😭

kboy 2021/11/07

このコメントによるとiOS15.1では直ってるとのことだが、真相はいかに。

kboy 2021/11/14に更新

このコメントによると、

Flutter 2.0.0 ... OK
Flutter 2.2.0 ... OK
Flutter 2.2.3 ... OK
Flutter 2.5.0 ... NG(Broken layout)
Flutter 2.5.3 ... NG(Broken layout)

とのことで、Flutter2.5だと起きる問題っぽい。2.2.3に戻せばいけそう？

2.2.3に戻してみたが、だめだった。
現状はまだユーザーに設定を変えてもらうしかない。

kboy 2021/11/23

macの場合の応急処置対応はここの「GPU Process: Canvas Rendering」の設定を変更