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

Question

我正在从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

p。这也不能在iOS上的Safari中工作(如果我在上面的代码中包含触摸事件处理程序)。我的Mac Safari版本是16.1.

Answer 1

这个问题似乎在最新的技术预览版(Release 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"
/>