How to prevent checkboxes and dropdowns in a div to be scaled in safari

Question

I have a div which contains some elements. I want the div to be scaled when it is hovered upon. It works fine in chrome but something weird happens in safari. The checkboxes and dropdowns are also getting scaled. How can I fix it in safari?

.box:hover {
  transform: scale(1.03);
  -ms-transform: scale(1.03);
  -webkit-transform: scale(1.03);
  -webkit-transition: all .01s ease-in-out;
  transition: all .01s ease-in-out;
}

div {
  padding-left: 30px;
  margin: 10px;
}

.box {
  border: 1px solid black;
}

<div class="box">
  <div>
    <input type="checkbox" name="opt1" id="option1" /> hello
  </div>
  <div>
    <select>
      <option>apple</option>
      <option>orange</option>
    </select>
  </div>
  <div>
    <input type="text" placeholder="enter something" />
  </div>
</div>

Answer 1

This isn't browser specific issue, the transform scale property is working the way it should work, it will scale each and every nested element(s) to 1.03 within .box element.

The only way you have is to use inverse scaling to child elements 1 / 1.03 = 0.97

.box:hover {
  transform: scale(1.03);
  -ms-transform: scale(1.03);
  -webkit-transform: scale(1.03);
  -webkit-transition: all .01s ease-in-out;
  transition: all .01s ease-in-out;
}

div {
  padding-left: 30px;
  margin: 10px;
}

.box:hover *{
  transform: scale(0.97);
  -ms-transform: scale(0.97);
  -webkit-transform: scale(0.97);
  -webkit-transition: all .01s ease-in-out;
  transition: all .01s ease-in-out;
}

.box {
  border: 1px solid black;
}

<div class="box">
  <div>
    <input type="checkbox" name="opt1" id="option1" /> hello
  </div>
  <div>
  <select>
    <option>apple</option>
    <option>orange</option>
  </select>
  </div>
  <div>
    <input type="text" placeholder="enter something" />
  </div>
</div>

Source

Answer 2

Another solution would be to move the scale effect to a pseudo element which behaves exactly the same as your main div .box. This pseudo element will adapt the height and width of this div.

The advantage with this solution would be that the content of your div .box wouldn't get affected by the scale anymore since the scale doesn't happen on this div. In addition, you don't have to change anything in your HTML structure.

div {
  padding-left: 30px;
  margin: 10px;
}

.box {
  position: relative;
  padding: 10px;
}

.box:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) scale(1);
  border: 1px solid black;
  transition: 0.3s;
  z-index: -1;
}

.box:hover:after {
  transform: translate(-50%, -50%) scale(1.03);
}

<div class="box">
  <div>
    <input type="checkbox" name="opt1" id="option1" /> hello
  </div>
  <div>
    <select>
      <option>apple</option>
      <option>orange</option>
    </select>
  </div>
  <div>
    <input type="text" placeholder="enter something" />
  </div>
</div>

Answer 3

You can add this to your css on the checkboxes:

-webkit-transform:scale(3, 3);

Answer 4

div {
  padding-left: 30px;
  margin: 10px;
}

.box {
  position: relative;
  padding: 10px;
}

.box:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform:scale(1);
  border: 1px solid black;
  transition: 0.3s;
}

.box:hover:after {
  transform:scale(1.03);
}

<div class="box">
  <div>
    <input type="checkbox" name="opt1" id="option1" /> hello
  </div>
  <div>
    <select>
      <option>apple</option>
      <option>orange</option>
    </select>
  </div>
  <div>
    <input type="text" placeholder="enter something" />
  </div>
</div>

I have removed transform property from @SvenL answer. without that too its working fine in safari.

Answer 5

Yeah with just HTML,CSS alone you cannot style differently for Safari, Chrome and Opera since all of the three uses the same flag -webkit- for styling using css

so the possible solutions is to Detect the browser using javascript and add a class to your body to indicate the browser

Eg. if you wanna style safari you will be styling

.safari .box:hover{

     /* style as you need */

}

the test code i had run is attached below.

<html>
<head>
    <title>TVEK Test App for srk</title>
</head>
<body>
    <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(function () {
            var userAgent = navigator.userAgent.toLowerCase(); 
            if (userAgent .indexOf('safari')!=-1){ 
                if(userAgent .indexOf('chrome')  > -1){
                    //browser is chrome
                    alert('chrome');
                }else if((userAgent .indexOf('opera')  > -1)||(userAgent .indexOf('opr')  > -1)){
                    //browser is opera 
                    alert('opera');
                }else{
                    //browser is safari, add css
                    alert('safari');
                    $("body").addClass("safari");
                }
            }
        });
    </script>
    <style type="text/css">
    .safari .box{
        /* add your required style here */
      margin:20px;
    }

    .box:hover {
      transform: scale(1.03);
      -ms-transform: scale(1.03);
      -webkit-transform: scale(1.03);
      -webkit-transition: all .01s ease-in-out;
      transition: all .01s ease-in-out;
    }

    div {
      padding-left: 30px;
      margin: 10px;
    }

    .box {
      border: 1px solid black;
    }
    </style>

    <div class="box">
        <div>
            <input type="checkbox" name="opt1" id="option1" /> hello
        </div>
        <div>
            <select>
                <option>apple</option>
                <option>orange</option>
            </select>
        </div>
        <div>
            <input type="text" placeholder="enter something" />
        </div>
    </div>
</body>
</html>

Please credit the bounty if my solution is helpful

you can remove the alert if required. I just added the alert to show you the Proof-of-Evidence.