Edge (Windows 11) not handling combined css translate and scale on an HEVC video.

Copper Contributor

MNS Edge Version 121.0.2277.128 (Official build) (64-bit)

 

I work on a CCTV web application. On the live and recorded video, I have a facility to scale and pan the video to enable a focussed zoom centred on the point where the mouse cursor is situated. The code used to apply the transform follows: -

 

this.video.style.transitionProperty = "transform";
this.video.style.transitionDuration = (fast ? 0 : 550) + "ms";
this.video.style.transformOrigin = 0 + " " + 0;
this.video.style.transform = "translate(" + this.offset.x + "px, " + this.offset.y + "px) scale(" + this.scale + ")";

 

This works well in all browsers (Chromium based), with HEVC or H265 video playing through a fragmented mp4 stream. The exception is on the Windows version of Edge with an HEVC video in which the translate and scale operation occur separately so that the video slides out of the viewport before zooming back to the correct position. 

Summary

  • MS Edge for Windows appears to perform the translate and scale operation separately, with a time lag between, giving a poor user experience (HEVC only).
  • MS Edge for Windows performs this transform correctly for H264 video.
  • MS Edge on Ubuntu (same version) performs this transform correctly for HEVC and H264 video.
  • Other Chromium based browsers (Chrome, Chromium, Brave) performs this transform correctly for HEVC and H264 video.
  • Firefox does not support HEVC, but performs this transform correctly for H264 video.

Cheers

 

Richard

1 Reply
This is fixed in version 122.0.2365.66