Search code examples
flutterdartflutter-layoutflutter-web

Widget appears wrong using Mac OS Safari and suddenly changes

A Flutter WebApp behaves using MacOS Chrome just fine. Using Safari on MacOS, the UI changes at certain points randomly. MacOS and Safari are the most recent releases with any applicable patch installed.

As far as I understand, MacOS Safari is a first class platform to run Flutter apps. Could someone explain, what I may have missed?

Example

  • The Widget should appear as in the right image.
  • Actually, it appears as the one in the left image.
  • As soon as I move the mouse pointer over the second button, it changes from Urlau to ....

The String Urlau appears somewhere in the Flutter app, but very far away from the respective widget. Fully unrelated.

I compiled like so: flutter build web --web-renderer html

Using Safari on MacOS appears like so:

enter image description here

Using Chrome on MacOS appears just fine:

enter image description here

Solution

  • Try rendering with canvas kit using this command

    flutter build web --web-renderer canvaskit