javascript 为什么在Safari中更新亮度过滤器没有效果?

ntjbwcob  于 2023-01-01  发布在  Java
关注(0)|答案(1)|浏览(123)

我正在从JavaScript更新DOM元素的亮度/对比度:

let style = `brightness(${brightness}%) contrast(${contrast}%)`;
element.style.filter = style;

当用户按住鼠标左键并移动光标时会发生这种情况。然而,亮度/对比度在Safari(Mac)中不会改变,除非滚动条可见。然而,亮度在其他浏览器(Chrome、Firefox、Edge)中会改变。这是Safari中的一个bug吗?如何使其在Safari中工作?
演示:https://l36vng.csb.app/
代码:https://codesandbox.io/s/charming-vaughan-l36vng?file=/main.js:2207-2306
PS.这在iOS上的Safari中也不起作用(如果我在上面的代码中包含触摸事件处理程序的话)。我的Mac Safari版本是16. 1。

dfddblmv

dfddblmv1#

这似乎在最新的技术预览版(版本160(Safari 16.4,WebKit 18615.1.14.3))中得到了修复。
目前,你可以通过在filter属性上添加一个超快的转换来解决这个问题,这将使当前的稳定性很好,并按预期更新过滤器。

// Change brightness/contrast of the image by holding
// left mouse button on the image and moving cursor.
// Moving horizontally changes brightness,
// moving vertically changes contrast.
class Brightness {
  constructor(element) {
    this.element = element;

    // x and y mouse coordinates of the cursor
    // when the brightness change was started
    this.startPosition = null;

    this.brightnessPercent = 100;

    // Current brightness/contrast percentage.
    this.currentAmount = {
      brightness: 100,
      contrast: 100
    };

    // True if the user holds left mouse bottom, which
    // indicates that brightness is being changed.
    // False by default or when the left mouse button is released.
    this.active = false;

    this.addEventListeners();
  }

  addEventListeners() {
    let element = this.element;

    // Start changing brightness
    // -----------------

    element.addEventListener("mousedown", (e) => {
      if (e.button !== 0) return; // Not a left mouse button
      this.active = true;
      e.preventDefault();
      this.startChange(e);
    });

    // End changing brightness
    // -----------------

    document.addEventListener("mouseup", () => {
      this.active = false;
    });

    // Drag the pointer over the bar
    // -----------------

    document.addEventListener("mousemove", (e) => {
      if (!this.active) return;
      this.change(e);
    });
  }

  startChange(e) {
    this.startPosition = this.positionFromCursor(e);
  }

  change(e) {
    let position = this.positionFromCursor(e);

    let xChange = position.x - this.startPosition.x;
    this.changeCurrentAmount(xChange, "brightness");

    let yChange = position.y - this.startPosition.y;
    this.changeCurrentAmount(yChange, "contrast");

    this.changeImageStyle();
  }

  changeCurrentAmount(change, type) {
    change /= 2; // Decrease rate of change
    change = Math.round(change);
    let amount = 100 + change;
    if (type === "contrast") amount = 100 - change;
    if (amount < 0) amount = 0;
    this.currentAmount[type] = amount;
  }

  changeImageStyle() {
    let brightness = this.currentAmount.brightness;
    let contrast = this.currentAmount.contrast;
    let css = `brightness(${brightness}%) contrast(${contrast}%)`;
    this.element.style.filter = css;
  }

  positionFromCursor(e) {
    let pointerX = e.pageX;
    let pointerY = e.pageY;

    if (e.touches && e.touches.length > 0) {
      pointerX = e.touches[0].pageX;
      pointerY = e.touches[0].pageY;
    }

    return { x: pointerX, y: pointerY };
  }
}

document.addEventListener("DOMContentLoaded", function () {
  const imageElement = document.querySelector(".Image");
  new Brightness(imageElement);
});
.Image {
  /* Safari bug workaround */
  transition: filter 1e-6s linear;
}
<img
    class="Image"
    width="512"
    height="512"
    src="https://64.media.tumblr.com/df185589006321d70d37d1a59040d7c3/df57f19b4b4b783a-cb/s250x400/e76347d6b1cb4aa08839036fb0407a9f6108a0ab.jpg"
  />

相关问题