Safari (Web) shows black vertical half of camera preview on Flutter 3.42.0 + mobile_scanner 7.1.4 (works on Flutter 3.38.10)

[work8mode]

Safari Web has an issue with camera preview rendering that appears after upgrading Flutter.

Environment

• Flutter: 3.42.0

• Browser: Safari 26.2 (iOS)

• Package: mobile_scanner 7.1.4

• Platform: Flutter Web (Safari on iOS)

Problem

When opening the scanner screen in Safari (iOS) the camera preview is not rendered correctly: a vertical half of the scanning area becomes a black stripe (roughly 50% of the preview is black). In some cases, instead of a vertical black stripe, the preview becomes completely black.

This problem is NOT observed in other browsers (only Safari is affected).

Also, this does not happen on Flutter 3.38.10 — everything works normally there. The issue starts appearing on newer Flutter versions (reproduced on 3.42.0).

Screenshots

Preview issue (black half of the scanner):

Console errors screenshot:

Safari console shows:

Unhandled Promise Rejection: Error

Trying to play video that is already playing.

WebGL: non-portable extension enabled: WEBGL_polygon_mode

Reproduction

Unfortunately I cannot provide a minimal reproducible project/code due to internal project limitations.
I’m creating this issue mainly for other users who might hit the same Safari/Web problem — maybe this report will help them.

Temporary workaround

The workaround I found is to downgrade Flutter to 3.38.10.
On 3.38.10 Safari Web scanner preview works as expected.

[dt-justin]

I've been fighting this all day, but you are lucky you get half a screen I just get a full white screen, safari mobile and safari desktop.

All my debugging and the closest I got was adding this to index.html

<script>
  const observer = new MutationObserver((mutations) => {
    const glassPane = document.querySelector('flt-glass-pane');
    if (glassPane && glassPane.shadowRoot) {
      const containers = glassPane.shadowRoot.querySelectorAll('flt-canvas-container');

      containers.forEach(container => {
        if (container.style.position !== 'absolute') {
          container.style.position = 'absolute';
        }
      });
    }
  });

  observer.observe(document.documentElement, { childList: true, subtree: true });
</script>

It is NOT a fix but seems to show the entire camera so I could confirm mine was working since I couldn't see it at all, I could see the screens where bellow the view port.

Also I'm using ai_barcode_scanner, but that's just an overlay on mobile_scanner

Since I"m on a newer version of flutter and this is still an issue (maybe worse) and I can't find a report of this to flutter it's self, this should likely get reported to flutter. Downgrading did fix it for me as well.