title: Safari 11 css scaling on video container div makes video controls too small
body: <p>I have a DOM structure with a video element and a container which is bigger than screen and to make it fit in screen (without changing its dimension) I apply some scaling on it and found that zooming out by applying css scaling makes video controls smaller than the video itself.</p>
  
  <p>You can see the issue here on <a href="https://jsfiddle.net/mizmaar3/osjmocc5/2/if" rel="nofollow noreferrer">https://jsfiddle.net/mizmaar3/osjmocc5/2/if</a> you load this in safari 11.x</p>
  
  <pre><code>&lt;div id="video-container" style="width: 600px; height: 335px; position:relative; transform:scale(0.5); transform-origin:0% 0%"&gt;
      &lt;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"&gt;
      &lt;/video&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Any solution or fix will be appreciated</p>