Flutter Instagram WebView renders incorrectly

Viewed 186

I recently built and deployed my new personal website using Flutter Web. The website loads completely normally on any desktop or mobile browser. However, when launching the website on Instagram's own web browser on iOS, the widget rendering is completely wrong.

Expected Website UI

Error Website UI on Instagram WebView

I don't know if this would be an Instagram issue or a Flutter issue, but all other websites seem to be running normally on instagram browser. The new Flutter website seems to run fine on the WebView window from Facebook as well.

I even tried deploying the Flutter Demo Home Page, and similar errors happened on the Instagram browser as well: the top and bottom gets completely cut off.

Error Screenshot 1

Additionally, it seems as if the website had been stuck on loading: Error Screenshot 2

All errors go away on second launch for some reason, after I exit background and re-opened Instagram.

Has anyone encountered similar issues? I really don't know if there are errors with my code or it is just a bug with either Instagram or Flutter.

0 Answers
Related