Переход CSS по-разному в зависимости от типа браузера

В моем коде я изменяю положение некоторых элементов на основе текущей позиции мыши X и Y. Я добавил css transition: all 5000ms;, чтобы сделать анимацию более плавной.

Он отлично выглядит и работает так, как ожидалось, в Google Chrome (версия 63), но в браузере Internet Explorer и Firefox анимация выглядит лагги/прерывистой.

Вот мой код:

// $('.shape').css("transition", "all 7000ms");
$(document).mousemove(function(e){
    let mX = e.clientX;
    let mY = e.clientY;
    $('.shape-1').css("transform", "translate("+mX/10+"px, "+mY/10+"px)");
});

Кто-нибудь знает, почему браузеры рассматривают css-переходы по-разному?

JSFiddle без перехода CSS: https://jsfiddle.net/2rrcp27L/9/

JSFiddle с переходом CSS: https://jsfiddle.net/2rrcp27L/6/

Ответ 1

Основная причина, по которой это происходит, заключается в том, что mouseMove срабатывает многократно, и Chrome может справиться с этим, но, возможно, Firefox не является, и IE определенно не оптимизирован для обработки таких случаев.

Вы должны throttle ваши вызовы обработчику.

Смотрите эту скрипку: https://jsfiddle.net/s2f9d77x/

Кроме того, было бы целесообразно указать transition: transform вместо transition: all, чтобы сообщить браузеру не беспокоиться о других свойствах элемента.

Ответ 2

Проблема заключается в том, что частота событий мыши - вы устанавливаете новое преобразование до завершения эффекта перехода. FF/IE, как представляется, reset для окончательных значений перехода, а хром - из текущего состояния анимации.

Решение может быть объединенной настройкой свойств left и translate, как в обновленном фрагменте, где вы "имитируете" конец перехода обновленным свойством left/top. Это все еще немного нерешительно, так как каждый mousemove будет мгновенно обновляться до предыдущего события мыши, но не для этого. Если вы хотите больше контролировать анимацию, вам придется писать гораздо более сложный javascript.

$('.shape')
   .css("transition", "transform 200ms cubic-bezier(0, 1.17, 1, 1)")
   .each(function() {
     $(this).data("left", parseInt($(this).css("left")));
     $(this).data("top", parseInt($(this).css("top")));
   });
 let factors = [
   [10, 10],
   [3, 3],
   [5, 5],
   [7, 7]
 ];
 let mX, mY;
 $(window).on('mousemove', function(e) {

   if (typeof mX !== "undefined") {
     $('.shape').each(function(idx) {
       let $shape = $(this);
       $shape.css({
         "left": $shape.data("left") + mX / factors[idx][0],
         "top": $shape.data("top") + mY / factors[idx][1],
         "transform": "translate(" + (e.clientX - mX) / factors[idx][0] + "px, " + (e.clientY - mY) / factors[idx][1] + "px)"
       });
     })
   }

   mX = e.clientX;
   mY = e.clientY;


 });

body {
    background: #E1F7E7;
    background: -moz-linear-gradient(45deg, rgba(169,232,220,1) 0%, rgba(225,247,231,1) 50%, rgba(169,232,220,1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(169,232,220,1)), color-stop(50%, rgba(225,247,231,1)), color-stop(100%, rgba(169,232,220,1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(45deg, rgba(169,232,220,1) 0%, rgba(225,247,231,1) 50%, rgba(169,232,220,1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(45deg, rgba(169,232,220,1) 0%, rgba(225,247,231,1) 50%, rgba(169,232,220,1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(45deg, rgba(169,232,220,1) 0%, rgba(225,247,231,1) 50%, rgba(169,232,220,1) 100%); /* ie10+ */
    background: linear-gradient(45deg, rgba(169,232,220,1) 0%, rgba(225,247,231,1) 50%, rgba(169,232,220,1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e8dc', endColorstr='#a9e8dc',GradientType=1 ); /* ie6-9 */
}
.shape {
    position: fixed;
    transform-origin: center;
}
.shape:after{
    position: absolute;
    content: "";
    left: -25px;
    top: -50px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 500px solid;
}

.shape-1 {
    top: 50px;
    left: 200px;
}
.shape.shape-1:after {
    transform: rotate(190deg);
    border-bottom-color: #A9E8DC;
}

.shape-2 {
    bottom: 300px;
    left: 250px;
}
.shape.shape-2:after {
    transform: rotate(19deg);
    border-bottom-color: #02BEC4;
}
.shape-3 {
    
    bottom: 380px;
    right: 220px;
}
.shape.shape-3:after {
    transform: rotate(-19deg);
    border-bottom-color: #0284A8;
}

.shape-4 {
    top: 200px;
    right: 180px;
}
.shape.shape-4:after {
    transform: rotate(-190deg);
    border-bottom-color: #050C42;
}

@media (max-width: 1450px) {
    .shape.shape-4:after {
        transform: rotate(-190deg);
        border-bottom-color: #02BEC4;
    }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"></script>
<div class="shape shape-1"></div>
<div class="shape shape-2"></div>
<div class="shape shape-3"></div>
<div class="shape shape-4"></div>
<div class="container">
  <h1>Hello World</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum magnam unde earum voluptas quae? Molestiae cum suscipit, esse placeat eligendi rerum nam minus inventore. Voluptatum impedit sunt quisquam officiis eius obcaecati totam aliquid incidunt
    vel aliquam. Nemo quae iusto perferendis corrupti provident sint quisquam, impedit nesciunt architecto a, ea necessitatibus!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, eveniet! Harum saepe quia inventore, atque dolorem culpa debitis. Blanditiis ad ab delectus, magnam assumenda sequi corrupti dolorum incidunt eligendi obcaecati magni! Veniam maxime
    ratione placeat veritatis excepturi. Nisi sed, dolorum, maxime laboriosam magnam vel aperiam beatae autem dicta, totam commodi? Modi, ratione tempore recusandae nulla suscipit quaerat earum repudiandae vero sit ad dolorem quasi, laboriosam culpa.
    Sequi, laboriosam assumenda? Aliquid esse impedit cum reprehenderit ex ipsa deleniti nam pariatur alias iusto sit tempore tempora eius optio voluptates veniam, laboriosam aliquam, odio corporis possimus nihil fugiat. Consectetur repellendus fugit
    dolorum ipsa ullam optio tempora maxime possimus, atque aut doloribus, iusto quam? Repellendus ipsa, praesentium tempore incidunt quasi cumque quidem nostrum harum non facilis doloremque voluptates quis architecto consequuntur consequatur. Illo, eius?
    Dolorem deserunt ipsam error voluptates necessitatibus iste dolor? Quo adipisci corporis incidunt fuga sapiente recusandae qui quod, impedit maiores! Eum blanditiis natus officiis inventore architecto! Aliquid quis praesentium doloremque laboriosam
    consectetur veniam excepturi inventore, exercitationem iusto sed, maxime sunt laudantium porro possimus esse? Dolor eveniet laborum aut tempore blanditiis voluptatem asperiores dolore incidunt, ipsa ea ut consequatur, itaque sint reprehenderit aliquam
    nesciunt debitis ex quia. Cupiditate beatae sapiente minima, fuga architecto, ad, aliquam provident et corporis tempore nostrum natus labore hic in eaque dolor perspiciatis nesciunt deleniti error unde. Sapiente nemo deleniti omnis quod odit accusamus
    obcaecati ea culpa ut fugiat, cumque vitae? Iste corporis quo illum nesciunt fugit quis officia consequuntur sit eum dignissimos. Necessitatibus autem eligendi quod quis tenetur, quos excepturi rerum repudiandae ullam magnam sequi consequuntur voluptate
    sint nemo ea, at tempora. Dolore consequuntur excepturi perferendis cumque tempore nam consequatur sit tempora cupiditate nisi magnam quos nulla nobis iste optio voluptas temporibus mollitia quibusdam hic, eaque vitae culpa dolorum error? Beatae numquam
    animi distinctio doloribus unde velit quasi quisquam necessitatibus reprehenderit vitae, obcaecati minus, tempora illo impedit ullam blanditiis vero excepturi ratione fugiat nemo? Quidem dicta perspiciatis iste cum, quisquam vel minima consequuntur
    blanditiis aperiam, sequi eligendi exercitationem inventore, eos facilis laborum beatae excepturi praesentium dolore quaerat assumenda quo obcaecati? Dolores, pariatur suscipit! Voluptate inventore assumenda delectus optio totam adipisci amet distinctio
    exercitationem sint debitis ea, vel deleniti odio odit. Illo adipisci, id, dolores culpa voluptatum eligendi fugit numquam quis accusamus possimus, ea odit laborum ullam non quasi! Dicta est aliquid saepe! In officia, dolor quo architecto illum repudiandae.
    Suscipit, pariatur sed commodi quod dolorem beatae quae!</p>
  <h2>What up?</h2>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque, dolor quam. Fugiat numquam eius animi omnis explicabo atque. Expedita velit unde iure earum, sit id esse provident odit illum recusandae deserunt laborum quis molestiae omnis! Laborum
    ea officiis exercitationem perferendis magnam temporibus eligendi porro earum nobis nesciunt. Ducimus quisquam commodi eum, pariatur, illo sint doloribus similique ea fuga porro sapiente, quam blanditiis. Veritatis quasi officia soluta explicabo nobis!
    Explicabo id voluptate quasi tenetur iste eum dolor illo, architecto, harum ad cum provident vero, saepe unde sed? Doloribus eaque pariatur sequi officia. Sit ipsam doloribus molestias ipsum adipisci recusandae explicabo sint ad rem magni, ducimus
    eligendi! Velit, dolore illo laboriosam ipsa, a sunt eum soluta nesciunt expedita porro atque maiores dolores amet temporibus nemo, cum hic libero autem ad? Nobis molestiae accusantium dolor aspernatur dolorem exercitationem reprehenderit quisquam
    est, fuga distinctio neque, iste, libero necessitatibus. Voluptatum aut ducimus autem magnam, quaerat iusto rem libero iste magni odio voluptatibus excepturi voluptates ab dolor laudantium nesciunt, ea, enim totam? Nostrum unde enim accusamus aliquid
    debitis sint amet commodi, iusto maxime distinctio. Nobis aut quae molestiae et architecto quo animi aliquam, vel iste, expedita, nihil praesentium voluptates soluta sed? Illum natus, aspernatur iure expedita beatae maxime eveniet perferendis laborum
    recusandae quo temporibus voluptate dolores fugiat at. Sit aperiam minus et nemo doloremque nihil, alias libero dolor dolorum commodi pariatur in atque deleniti distinctio recusandae molestias consequuntur consectetur sapiente ut cupiditate fugiat
    eveniet. Ad quo quaerat consequuntur recusandae excepturi debitis tempora temporibus atque amet iure.</p>
  <br>
  <h2>and Good Bye...</h2>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum unde, necessitatibus laboriosam obcaecati cumque eum iure blanditiis voluptate temporibus possimus quam suscipit dolore dicta reprehenderit repellendus? Minima, voluptate voluptatum! Nostrum
    modi minus dignissimos, minima omnis eligendi adipisci eaque consectetur totam incidunt vitae reprehenderit, corrupti qui dicta soluta nihil! In quasi porro temporibus ipsum similique, aspernatur velit ullam laudantium id molestiae ut esse provident
    natus, eius iste earum ab corrupti, officiis distinctio eos repellat tenetur odio. Temporibus, eum! Aliquid libero doloribus necessitatibus consequuntur adipisci dicta ducimus quam qui odit atque eius voluptates repellendus illo non perferendis eum
    reiciendis dolor aliquam, excepturi voluptatum. Temporibus veritatis autem, numquam ab maiores cumque exercitationem. Porro minima quod magni blanditiis cupiditate dolorum dolores qui, ipsum voluptas nostrum, soluta modi nam harum atque aliquid ea
    totam accusantium consectetur quae? Libero ad at atque quisquam enim accusamus, perferendis provident sequi, blanditiis velit recusandae odio tenetur deserunt quo incidunt quam eaque perspiciatis fugit in unde non quidem, natus labore? Eveniet ducimus
    eius ullam! Aut aperiam enim, voluptatibus, harum cumque voluptas debitis voluptatem ullam placeat omnis et magni dolorem asperiores obcaecati quo deleniti delectus error incidunt possimus expedita maiores quisquam reiciendis? Unde, reprehenderit.
    Et natus ullam asperiores sapiente veniam sint.</p>
</div>

Ответ 3

Через некоторое время я нашел решение, которое наилучшим образом подходит для меня, и ему не нужна дополнительная библиотека (кроме jQuery)

В основном я создал свою собственную функцию "дроссельной заслонки", которая обновляет текущую позицию x и y мыши.

Здесь я прикрепляю позицию мыши к объекту окна, каждый раз, когда мышь перемещается в окне браузера:

$(document).mousemove(function(e){
    var event = e || window.event;
    window.mouseX = event.clientX;
    window.mouseY = event.clientY;
});

Затем у меня есть другая функция, которая устанавливает положение моих элементов:

function moveElements() {
   $('.shape-1').css("transform", "translate("+ window.mouseX/10 +"px, "+ window.mouseY/10 +"px)");
}

Наконец, функция moveElements() вызывается каждые 100 миллисекунд, используя функцию setInterval():

setInterval(moveElements, 100);

Спасибо @kumar_harsh за то, что он дал мне идею о том, как решить проблему.

Я тестировал этот код в следующих браузерах, и он работает без лагов/дрожания:

Chrome 63
Firefox 57
Internet Explorer 11
Microsoft Edge 16
Safari 11

здесь мой последний JSFiddle: https://jsfiddle.net/2rrcp27L/27/

Ответ 4

Вы можете использовать:

-webkit-transform /* android, safari, chrome */

-moz-transform /* old firefox */

-o-transform /* old opera */

-ms-transform /* old IE */

transform   /*standard */