[Webkit-unassigned] [Bug 266686] New: I am experiencing an issue on Safari 17 where using Video srcObject = MediaStream to play a particular captured video stream, and resizing it via style settings for width and height, results in the rendered video flickering.

Wed Dec 20 01:21:54 PST 2023

https://bugs.webkit.org/show_bug.cgi?id=266686

            Bug ID: 266686
           Summary: I am experiencing an issue on Safari 17 where using
                    Video srcObject = MediaStream to play a particular
                    captured video stream, and resizing it via style
                    settings for width and height, results in the rendered
                    video flickering.
           Product: WebKit
           Version: Safari 17
          Hardware: Unspecified
               URL: https://www.bilibili.com/video/BV17Q4y1u7MS/
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: fategemini1 at gmail.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Below is the minimal reproducible code snippet that demonstrates the issue:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test safari 17 bug</title>
  </head>
  <body>
    <button id="btn1">camera</button>
    <video
      id="video"
      style="
        width: 600px;
        height: 600px;
        transform-origin: top left;
        transition: all 0.3s ease;
      "
      controls
      autoplay
      playsinline
      webkit-playsinline
    ></video>
    <button id="btn2">zoom</button>
    <script>
      btn1.onclick = function () {
        navigator.mediaDevices
          .getUserMedia({
            video: true,
          })
          .then((stream) => {
            video.srcObject = stream;
          });
      };
      btn2.onclick = function () {
        video.style.width = video.style.width === '300px' ? '600px' : '300px';
        video.style.height = video.style.height === '300px' ? '600px' : '300px';
      };
    </script>
  </body>
</html>
```

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20231220/b92ffb77/attachment.htm>