Safari 11 css缩放视频容器div使得视频控件太小

Question

我有一个DOM结构，带有一个视频元素和一个比屏幕更大的容器，并使其适合屏幕（不改变其尺寸）我对它应用了一些缩放，发现通过应用css缩放缩小使视频控制小于视频本身。

你可以在https://jsfiddle.net/mizmaar3/osjmocc5/2/if上看到这个问题，你在safari 11.x中加载它

<div id="video-container" style="width: 600px; height: 335px; position:relative; transform:scale(0.5); transform-origin:0% 0%">
    <video src="https://iabtechlab.com/wp-content/uploads/2017/12/VAST-4.0-Short-Intro-low-resolution.mp4"
           id="video" class="video" autoplay muted controls playsinline preload="auto"
           style="width: 100%; height: auto">
    </video>
  </div>

任何解决方案或修复将不胜感激

Answer 1

我遇到了同样的问题。它似乎发生在Safari 11中，但不是在Safari 9或更早版本中。这是我使用的解决方法。

我已经将“未缩放”类应用于视频元素本身，将其缩放回原始大小，然后使用宽度和高度来缩小它。这样，视频容器中的其他内容将保持缩放，但视频控件的大小合适。

在HTML中，将“未缩放”类添加到视频中，然后删除高度和宽度。

 <div id="video-container" style="width: 600px; height: 335px; position:relative; transform:scale(0.5); transform-origin:0% 0%">
    <video class="unscaled" src="https://iabtechlab.com/wp-content/uploads/2017/12/VAST-4.0-Short-Intro-low-resolution.mp4"
           id="video" class="video" autoplay muted controls playsinline preload="auto">
    </video>
  </div>

CSS：

.unscaled{
  transform:scale(2.0);
  transform-origin:0% 0%;
  width: 50%;
  height: 50%;
}

https://jsfiddle.net/osjmocc5/9/