如果使用transform:scale()缩放滑块，如何使滑块正常工作

Question

我的页面上有一个 jQWidget slider，但 jQuery slider 也存在同样的问题。如果我将

transform: scale(0.7)

设置为层次结构中上面的任何元素，则滑块不会显示正确的视觉值，并且滑动与鼠标位置不同步。

我该如何解决这个问题？我的目标是缩放包含多个滑块但也包含其他元素的 div。

有趣的是：如果我将容器放入 iframe 中并缩放它，滑块将按预期工作。为什么会这样？缩放容器是一种可以接受的方法吗（我想不是）？

  $( function() {
    $( "#slider" ).slider();
  } );

#slider {
  transform: scale(0.7);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.14.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.0/themes/base/jquery-ui.css">

<div id="slider"></div>

Answer 1

可以使用 CSS 主题并缩小值。

$(function() {
  function scale(n, s) {
    return n * s;
  }
  $("#slider").slider({
    classes: {
      "ui-slider": "s70 ui-corner-all",
      "ui-slider-handle": "s70 ui-corner-all",
    }
  });
});

.ui-slider.s70 {
  width: 70%;
  height: calc(.8em * .7);
  margin: 0 auto 0 auto;
}

.ui-slider .ui-slider-handle.s70 {
  width: calc(1.2em * .7);
  height: calc(1.2em * .7);
  top: -.2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.14.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.0/themes/base/jquery-ui.css">

<div id="slider"></div>