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.
You can see the issue here on https://jsfiddle.net/mizmaar3/osjmocc5/2/if you load this in 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>
Any solution or fix will be appreciated
I ran into the same issue. It seems to be happening in Safari 11, but not in Safari 9 or earlier. This is the workaround I used.
I've applied an "unscaled" class to the video element itself, scaling it back up to its original size, then used the width and the height to scale it down. This way the rest of the stuff in your video container will stay scaled, but the video controls are the appropriate size.
In the HTML, add the "unscaled" class to the video, and remove the height and width.
<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%;
}