html - 如何防止在 safari 中缩放 div 中的复选框和下拉菜单

Question

我有一个包含一些元素的 div。我希望 div 在悬停时进行缩放。它在 chrome 中运行良好，但在 safari 中发生了一些奇怪的事情。复选框和下拉菜单也被缩放。如何在 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

这不是特定于浏览器的问题，转换缩放属性正在按其应有的方式工作，它将每个嵌套元素缩放到 1.03在 .box 内元素。

唯一的方法是对子元素使用反向缩放 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