Перемещение фона на MouseMove Firefox проблема - PullRequest
Новая
       26

Перемещение фона на MouseMove Firefox проблема

0 голосов
/ 08 апреля 2020

У меня есть функция jQuery, изменяющая положение фона текста, который вылетается (сделанный со свойствами background-clip и text-fill) при перемещении мыши. Все отлично воспроизводится в Chrome и Safari, но странно действует в Firefox: при перемещении мыши всплывающее фоновое изображение и скрытие текста.

Вот скрипка: 

var movementStrength = 30;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$("body").mousemove(function (e) {
    var pageX = e.pageX - ($(window).width() / 2);
    var pageY = e.pageY - ($(window).height() / 2);
    var newvalueX = width * pageX *  1 - 10;
    var newvalueY = height * pageY * -1 - 10;
    $('#claim').css('background-position', newvalueX + "px " + newvalueY + "px " );

});
#claim {
  width:100%;
  height:100%;
  cursor: default;
  margin: 0;
  line-height:  .75em;
  font-size: 10em;
  padding-bottom: 10px;
    font-weight:900;
    font-style: italic;

}
.clip {
 
  background-image: url("https://www.placecage.com/c/1600/600");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
  color: #fff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  cursor: default;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="claim" class="clip">lorem ipsum</h1>

Я не могу понять, как это решить. Какие-либо предложения? Спасибо

...