Изменение стиля курсора мыши браузера становится недействительным после того, как браузер теряет фокус.CSS

Разбираемся в CSS
Ответить
Anonymous
 Изменение стиля курсора мыши браузера становится недействительным после того, как браузер теряет фокус.

Сообщение Anonymous »

Мне нужно динамически изменить стиль курсора мыши в браузере, чтобы добиться эффекта анимации мыши. Чтобы упростить контент для обсуждения, его можно представить следующим кодом:

Код: Выделить всё

const cursorTypes = ["default", "pointer", "text", "move", "help", "progress", "crosshair", "not-allowed", "zoom-in", "zoom-out", "grab", "grabbing"];
let cIndex = 0;

setInterval(() => {
console.log(cIndex);
document.body.style.cursor = cursorTypes[cIndex];
cIndex++;
if (cIndex >= cursorTypes.length) {
cIndex = 0;
}
}, 500);

Проблема в том, что когда браузер теряет фокус, хотя функция setInterval продолжает работать нормально, стиль курсора мыши не меняется. Однако при постоянном перемещении мыши в области просмотра браузера неотрисованные стили будут применяться последовательно с заданным интервалом. Как только мышь перестает двигаться, рендеринг немедленно прекращается, пока браузер не восстановит фокус. Почему это происходит? Я подозреваю, что это может быть связано с буфером рендеринга браузера.
Я пробовал использовать функцию requestAnimationFrame для обновления анимации:

Код: Выделить всё

let frameIndex = 0;
let step = (timestamp, elapsed) => {
if (elapsed > 1000 / frameRate) {
document.body.style.cursor = cursorTypes[cIndex];
frameIndex++;
if (frameIndex >= frameURLs.length) {
frameIndex = 0;
}
elapsed = 0;
}
console.log(frameIndex);
window.requestAnimationFrame((_timestamp) =>
step(_timestamp, elapsed + _timestamp - timestamp)
);
};
window.requestAnimationFrame((timestamp) => step(timestamp, 0));
Или используя свойство анимации CSS:

Код: Выделить всё

@keyframes cursor-animation-keyframes{
0% { cursor: default; }
6% { cursor: pointer; }
...
}

.cursor-animation {
animation: cursor-animation-keyframes 1866ms step-end infinite;
}
Но результаты те же, без каких-либо различий.
Что мне следует сделать, чтобы модификация стиля курсора мыши по-прежнему работала после того, как браузер теряет фокус?

Подробнее здесь: https://stackoverflow.com/questions/793 ... fter-the-b
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»