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>