Question

我发现铬/铬中有一个非常奇怪的行为，即它们有时根本不响应transform:scale的变化。

let $$ = s => document.querySelector(s)
let back = $$('.back')
let backCtx = back.getContext('2d')
backCtx.fillStyle='#36b3ee'
backCtx.fillRect(0, 0, 600, 600)

let state = {
  scale: 1
}
let stateProxy = {}
const limited = function(v, l, r) {
  return Math.max(Math.min(parseFloat(v), r), l)
}
let con = document.querySelector('.preview-body')

Object.defineProperty(stateProxy, 'scale', {
  get: function() {
    return state.scale
  },
  set: function(nv) {
    state.scale = limited(nv, 0.1, 1)
    con.style.transform = 'scale('+state.scale.toFixed(2)+')'
  }
})

$('.preview-container').on('wheel', (e) => {
  if (e.ctrlKey) {
    e.preventDefault()
    if (e.originalEvent && e.originalEvent.deltaY) {
      if (e.originalEvent.deltaY > 0) {
        stateProxy.scale += 0.02
      } else {
        stateProxy.scale -= 0.02
      }
    }
  }
})

* {
  box-sizing: border-box;
}
.preview-container {
  max-height: 300px;
  width: 300px;
  overflow: auto;
  background-color: #f1f1f1;
}
.preview-body {
  transform: scale(1);
  transform-origin: top left;
  width: 600px;
  height: 600px;
}
.preview-body .fore {
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="preview-container">
  <div class="preview-body">
    <canvas class="back" width="600" height="600"></canvas>
  </div>
</div>

要查看问题（如果使用的是铬/铬（当前版本78））：

将鼠标悬停在容器和ctrl +轮上，缩小（缩小蓝色方框）
在某个时候，您应该发现该块不再收缩
稍微滚动一下，您应该会在块上看到立即的尺寸变化

如果有Firefox，请进行比较。

这是错误还是功能？我该如何逃脱？

铬/铬不更新转换：缩放？

0 个答案: