`Safari 11 issue: CSS scaling on video container div causes video controls to become too small`

I am facing an issue with my DOM structure, where I have a video element within a container that is larger than the screen. In order to fit it onto the screen without changing its dimensions, I applied some scaling. However, I noticed that zooming out by applying CSS scaling causes the video controls to appear smaller than the video itself.

You can view the problem here: https://jsfiddle.net/mizmaar3/osjmocc5/2/if when loaded 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>

I would appreciate any solutions or fixes to this issue. Thank you!

htmlioscsssafariosx-elcapitan

Answer №1

Encountered a similar issue myself. It appears to be specific to Safari 11, unlike Safari 9 or earlier versions. Here's the workaround I implemented.

I designated an "unscaled" class to the video element directly, reverting it back to its original size, then utilized width and height properties to resize it. This approach ensures that all other elements within the video container remain scaled appropriately while the video controls maintain the correct size.

To resolve this in HTML, include the "unscaled" class on the video tag and remove the height and width attributes.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In Swift dictionaries, key/value pairs are given individual names

Is there a way to use custom names for key/value pairs in Swift dictionaries? Instead of using index numbers, I prefer to refer to keys and values by their specified names. Although key/value pairs in Dictionary in Swift only covers accessing keys and val ...

iosswiftdictionary

How can we improve the resizing of images for smaller screens?

Don't let the title fool you. Check out this code: #headerimg { background: url('http://artotek.fi/css/images/artoteklogo.gif'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; border-bottom: solid ...

htmlcss

What is the method for placing a title in the initial column with the help of v-simple-table from Vuetify.js?

I am interested in using the v-simple-table UI component from Vuetify.js to create a table similar to the one shown below. https://i.sstatic.net/QNdpJ.png After creating the code in codesandbox and previewing the output, I noticed that the title is not a ...

javascriptcsstypescriptvue.jsvuetify.js

Dynamically changing the .active class and setting aria-current="page" based on the current active webpage

As I work on developing a website, I strive to make code modifications simple and efficient. To achieve this, I have integrated the navbar using <?php require_once('./includes/navbar.php'); ?>. This way, I can make changes site-wide by on ...

phphtmlwebbootstrap-5

Connect CSS Transition to a click action

Below is the code snippet. When you click on the div, it creates a folding effect to the left. You can view it here. I want to link this effect to the arrows I use for sliding back and forth. For example: The left arrow should move the slide to the l ...

javascriptjqueryhtmlcss

FusionCharts Gauges may share similar code, but each one produces a unique output

Currently, I am developing a project that involves creating a dashboard with 3 gauges. These gauges are enclosed in bootstrap cards with a column value set to 4. In the layout of the dashboard, these 3 cards are positioned next to each other. I have succe ...

javascripthtmllaravel

Is there a way to align my heading with my paragraph?

I am experiencing an issue with my CSS styling. The content following the top navigation bar is not aligning properly. I utilized the float: left and right properties in my code and then added a clearfix to align the next header, but unfortunately, it is n ...

jqueryhtmlcss

Is there a way to utilize JQuery to swap out a CSS background image while preserving the gradient effect?

Currently, I am facing a challenge in dynamically updating the background-image property of a div while preserving other background-related properties (such as color and gradient) using jQuery's .css() function. Although I can successfully replace the ...

javascriptjqueryhtmlcssbackground-image

Struggling with the transition of a CSS navigation menu from hover to focus

I'm attempting to transition a "mega menu" from 'hover' to 'focus'. My goal is to have the dropdown menus appear "on click" and remain visible until another top-level selection is clicked. Ideally, I am looking for a CSS-only solut ...

htmlcss

Here are the steps to input keys into an element such as `<textarea name="body" placeholder="Start typing...`

Presented below is an element: <textarea name="body" placeholder="Start typing..." tabindex="0" pwa2-uuid="EDITOR-C10-C4D-8CC58-82F" pwa-fake-editor="" spellcheck="false" style="white-spac ...

pythonhtmlselenium

Checkbox option to change background color of table cell

$('#selectall1').click(function(event) { if (this.checked) { $('.first').each(function() { this.checked = true; }); $('.second').each(function() { this.checked = false; }); $('.third&apos ...

jqueryhtmlcss

The jQuery scroll functionality is malfunctioning

Could you please assist me in resolving an issue with my scroll effects not working? I have been unable to pinpoint the problem. The code snippet I am using is based on Bootstrap 4. Below is the code snippet in question: //SCROLL EFFECT $(".nav-link" ...

javascriptjqueryhtmlbootstrap-4

Combining sticky user input and button side by side using CSS

I'm having trouble getting a user input and button to appear side by side and stay sticky at the top of the screen as you scroll. I've attempted using the float: left method and display:inline-block, but haven't had any success. Here is the ...

javascripthtmlcss

Changing the color of a select HTML element in Google Chrome

I have encountered an issue while trying to display a drop-down list in HTML. Despite successfully achieving this in Internet Explorer, I am facing a problem when using Google Chrome. To style the background color of the options in the select tag, I have ...

htmlgoogle-chromecolorshtml-select

The particular division is failing to display in its designated location

This is quite an interesting predicament I am facing! Currently, I am in the process of coding a website and incorporating the three.js flocking birds animation on a specific div labeled 'canvas-div'. My intention is to have this animation displa ...

javascriptcsscanvasthree.js

Process only the $_POST variables that have a specific string prefix

I am currently working on a form that will be handling numerous elements sent via $_POST. A significant portion of these elements, which are too numerous to list individually, have a consistent naming pattern: $_POST['city_1'] $_POST['city_ ...

phphtmlarraysformspost

Tips for showcasing several images with accompanying content once the webpage has finished loading

I am faced with an issue on my PHP website. The website is a social networking platform with numerous images and contents. I am seeking a way to first display only the content to the user, then show the images after they have all finished loading. Addition ...

javascriptphpjqueryhtmlcss

The status bar style is not maintained by the MailComposeViewController

Recently, I encountered an issue with the navigation Bar in MFMailComposeViewController. My app has the "Status bar style" set to "UIStatusBarStyleLightContent" in the plist file. Although this setting works perfectly in all views, it seems to revert back ...

iosios7mfmailcomposeviewcontroller

Adjust the height of the dropdown list in react-select (React Material UI)

I recently added a dropdown feature using react-select to my project. However, I encountered an issue where the dropdown list was initially too large and taking up the entire page. I am looking for a solution on how to style the react-select dropdown list ...

cssreactjsmaterial-ui

Can I give a "label" to the information being retrieved from the database?

I am looking to give a name to the answers fetched from the database. Currently, I am configuring a questionnaire/quiz with the questions and corresponding answers stored in the database. Here is my PHP code snippet: public function site() { $db = n ...

phphtml