Video gets cropped in DeviceFrame on Safari

[jriegraf]

On the web platform in Safari, videos are cropped when displayed in a DeviceFrame. The image shows the same app on the left in Chrome and on the right in Safari. The video is displayed correctly in Chrome, but only a small part of it can be seen in Safari. It should look the same in Safari as it does in Chrome. Does anyone have an idea of what could be?

Example

import 'package:device_frame/device_frame.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: DeviceFrame(
        device: Devices.ios.iPhone13,
        isFrameVisible: true,
        orientation: Orientation.portrait,
        screen: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4')
      ..initialize().then((_) {
        _controller.setLooping(true);
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              )
            : Container(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _controller.value.isPlaying
                ? _controller.pause()
                : _controller.play();
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }
}

Versions

video_player: ^2.6.1
device_frame: ^1.1.0
Flutter 3.7.12
Safari 16.4 on macOS Ventura 13.3.1

[0ttik]

Facing the same issue here with cropping, I discovered that --web-renderer html helps, but might not be ideal solution to use old renderer just to fix the bug.