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 或更早版本中。这是我使用的解决方法。

我已将 "unscaled" class 应用到视频元素本身，将其缩放回原始大小，然后使用宽度和高度将其缩小。这样，视频容器中的其余内容将保持缩放，但视频控件的大小合适。

在HTML中，将"unscaled" class添加到视频中，并删除高度和宽度。

 <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/

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

Safari 11 css scaling on video container div makes video controls too small

html

css

safari

ios

osx-elcapitan