javascript - Safari 顶部、左侧过渡问题

Question

我已经设法使用 div 制作自定义光标。一切都适用于 chrome 和 firefox，但不适用于 Safari。我正在使用 transition 来实现效果。

在 Safari 中，它们似乎不会同时更新(当 left 的转换完成时，top 开始)

  function muisupdate(e) {
    if ($(window).width() > 991) {
      if (!e) var e = window.event;
      var mousex = e.pageX - 50;
      var mousey = e.pageY - $(window).scrollTop() - 50;
      $('.cursor').css({
        'top': mousey + 'px',
        'left': mousex + 'px'
      });
      $('body').css('cursor', 'none');
    }
  }

  $(window).mousemove(function(e) {
    muisupdate(e);
  });

.cursor {
  position: fixed;
  transform-origin: 50% 50%;
  width: 100px;
  height: 100px;
  /*border-radius: 100%;
    background:red;*/
  z-index: 99999;
  -webkit-transition: left top 0.5s cubic-bezier(.075, .82, .165, 1);
  -moz-transition: left top 0.5s cubic-bezier(.075, .82, .165, 1);
  -o-transition: left top 0.5s cubic-bezier(.075, .82, .165, 1);
  transition: 0.5s cubic-bezier(.075, .82, .165, 1);
  transition-property: left, top;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  transition-delay: 0s;
  mix-blend-mode: difference;
  pointer-events: none;
}

path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  --length: 24;
  --offset: -38;
  stroke-dasharray: var(--length) var(--total-length);
  stroke-dashoffset: var(--offset);
  -webkit-transition: all .8s cubic-bezier(.645, .045, .355, 1);
  transition: all .8s cubic-bezier(.645, .045, .355, 1);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

body {
  cursor: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor">
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="5.15"></circle>
  </svg>
</div>

工作示例:Codepen

有谁知道怎么让它平滑吗？

编辑 我已经将 transition 中的 right 更改为 top 但是这 not 解决问题

Answer 1

您应该在 css 过渡属性中将 right 更改为 top:

-webkit-transition: left right 0.5s cubic-bezier(.075, .82, .165, 1);
-moz-transition: left right 0.5s cubic-bezier(.075, .82, .165, 1);
-o-transition: left right 0.5s cubic-bezier(.075, .82, .165, 1);
transition: 0.5s cubic-bezier(.075, .82, .165, 1);
transition-property: left, right;

->

-webkit-transition: left top 0.5s cubic-bezier(.075, .82, .165, 1);
-moz-transition: left top 0.5s cubic-bezier(.075, .82, .165, 1);
-o-transition: left top 0.5s cubic-bezier(.075, .82, .165, 1);
transition: 0.5s cubic-bezier(.075, .82, .165, 1);
transition-property: left, top;

因为您从不使用 right 属性，而是使用转换未使用的 top 。在 Safari 中，它只是运行得更快一些，而在 Chrome 中，它看起来像是被转换了(实际上并没有)