Question

场景： 我正在做一个有趣的小型网络应用，可以达到效果，好像用户在黑色叠加图像中挖洞并且可以看到通过洞的原始图像的一部分。该实现仅基于黑色覆盖图像上的孔位置以编程方式定位背景图像。通过这种实现，感觉用户正在通过洞看到原始图像的一部分。

问题： 在变焦水平为125％的铬合金上，当我移动孔时，我可以明显感觉到背景图像抖动，震动范围大约为1px。该实现在Edge，Firefox中可以在任何缩放级别下完美运行。在具有100％变焦的铬合金上，我也感觉不到抖动。

尝试： 我觉得这可能是一个chrome subpixel rending问题但是在我Math.floor / Math.ceil之后的Left和Top值，它仍然可以重现。谁能解释一下问题是什么以及如何绕过它？

如果您使用Chrome打开它并将浏览器缩放级别调整为125％，则以下jsfiddle可以帮助重现该问题。 https://jsfiddle.net/cxpjckpe/

＆＃13;

//Make the DIV element draggagle:
dragElement(document.getElementById(("mydiv")));

function dragElement(elmnt) {
  var pos1 = 0,
    pos2 = 0,
    pos3 = 0,
    pos4 = 0;

  elmnt.onmousedown = dragMouseDown;

  function dragMouseDown(e) {
    e = e || window.event;
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    var newTop = elmnt.offsetTop - pos2;
    var newLeft = elmnt.offsetLeft - pos1;
    elmnt.style.top = newTop + "px";
    elmnt.style.left = newLeft + "px";

    elmnt.style["background-image"] = 'url("https://www.ci.lubbock.tx.us/images/parks-rec-images/stumpy-hamilton-park.jpg?sfvrsn=950e9723_2")';
    elmnt.style["background-repeat"] = "no-repeat";
    elmnt.style["background-position"] = "-" + newLeft + "px " + "-" + newTop + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

＆＃13;

#mydiv {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
}

#mydivheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}

＆＃13;

<div style="position: absolute; width: 640px; height: 480px; background-image: url('https://www.ci.lubbock.tx.us/images/parks-rec-images/stumpy-hamilton-park.jpg?sfvrsn=950e9723_2');">
  <div style="position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3)"></div>
  <div id="mydiv" style="border: 2px solid white; width: 100px; height: 100px;">

  </div>
</div>

＆＃13;

在Chrome摇晃问题中缩放为125％时，以编程方式定位图像背景位置

0 个答案: