Div следующий курсор рисует пиксели на экране в Safari (ошибка?) - PullRequest
Новая
       71

Div следующий курсор рисует пиксели на экране в Safari (ошибка?)

0 голосов
/ 20 февраля 2020

Я использовал следующий код для создания div, который следует за курсором с применением замедления к движению:

CSS

#cursor {
    position: absolute;
    width: auto;
    height: auto;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 200ms;
    cursor:none!important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index:99999999;
    color:white;
    backface-visibility: hidden;
}

JavaScript / jQuery: 

$(document).on("mouseover mousemove", function (event) {
    mouseX = event.pageX;
    mouseY = event.pageY - $(window).scrollTop();
    cursorWidth = $cursor.width();
    cursorHeight = $cursor.height();
});
requestAnimationFrame(performAnimation);

var performAnimation = function() {
        var distX = mouseX - cursorX;
        var distY = mouseY - cursorY;
        cursorX = cursorX + (distX * speed);
        cursorY = cursorY + (distY * speed);

        $cursor.css({
            left: cursorX + "px",
            top: cursorY + "px"
        });
    request = requestAnimationFrame(performAnimation)
}

Работает так, как задумано в Chrome, но в Safari оставляет следы текста в элементе div в верхней части экрана, то есть элементы под z-index курсора, мудро. Вот видео , показывающее поведение.

Это известная ошибка в Safari и ее можно как-то избежать? Я не уверен, имеет ли это отношение к функции requestAnimationFrame() или к чему-то еще. Я попытался применить backface-visiblity:none; к #cursor через CSS, так как это иногда решает проблемы такого типа, но в этом случае ничего не происходит.

1 Ответ

0 голосов
/ 20 февраля 2020

Проблема была связана с тем, что #cursor является дочерним элементом контейнера, который был зафиксирован поверх всей страницы. Удаление этого контейнера и размещение #cursor без контейнера само по себе решило проблему.

Почему-то я подумал, что было бы целесообразно поместить курсор в этот контейнер, чтобы я мог добавлять классы через JS к контейнеру вместо самого курсора, чтобы управлять его стилем. Но в итоге я добавил классы стилей к <span> внутри #cursor.

...