Почему перемещение div оставляет след в javascript на телефоне?

Работает отлично на компьютере и iPhone, но на Galaxy S3 блок, который движется, оставляет след, который убирается случайным образом. Как это исправить?Почему перемещение div оставляет след в javascript на телефоне?

http://curtastic.com/test7.html

Тропа исчезает (очищается, как это должно быть), как раз в секунду.

enter image description here

<html> 
    <head> 
     <meta name="viewport" content="width=device-width" /> 
    </head> 
    <body style='margin:0;width:640px;'> 
     <div id=fps></div> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
     <script> 
      var block; 
      var angle=0; 

      var fpsFrames = 0; 
      var fpsTime = 0; 

      function gameLoop() { 
       var now = new Date(); 
       fpsFrames++; 
       if (now - fpsTime >= 1000) { 
        $('#fps').html("FPS: "+fpsFrames); 
        fpsFrames = 0; 
        fpsTime = now; 
       } 

       block.x += 3; 
       if (block.x >= $(window).width()-50) { 
        block.x = 0; 
       } 
       block.canvas.css('left', block.x); 
       block.canvas.css('top', block.y); 
      } 

      $(document).ready(function() { 
       $("body").append("<div id=block style='position:absolute;width:33px;height:33px;background:green' class=block></div>") 
       block = []; 
       block.canvas = $('#block'); 
       block.x = 0; 
       block.y = 55; 

       window.requestAnimFrame = (function(){ 
        return window.requestAnimationFrame  || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame || 
          function(callback){ 
          window.setTimeout(callback, 1000/60); 
          }; 
       })(); 


       (function animloop() { 
        requestAnimFrame(animloop); 
        gameLoop(); 
       })(); 

      }); 

     </script> 
    </body> 
</html>

источник

2013-08-15 Curtis

сделать ваш SetTimeout быть 1000 вместо '1000/60' –

@curtis несколько вещей .. проверьте ниже – woofmeow

Вы застряли с телефоном, который не имеет много вычислительной мощности для решения с изменениями так быстро.

Есть 2 способа:

Увеличьте время обратного вызова (как @Paul указал) в window.setTimeut так, что ваши и другие телефонные браузеры могут иметь дело с JavaScript. Если это невозможно. Затем попробуйте второй.
Добавление элементов с использованием фрагмента документа (это будет более эффективным): Если вы добавляете элементы, используя DocumentFragment то это обыкновение вызывать браузер перекомпоновке, который вызывает мерцание.

Как documentation говорит

Поскольку фрагмент документа в памяти и не является частью основного DOM дерева, добавляя детей не вызывают страницы оплавления (вычисление позиции элемента и геометрии) , Следовательно, использование фрагментов документа часто приводит к повышению производительности.

Вы также можете проверить мой ответ на this question, который несколько связан.

Надежда, что помогает :)

источник

2013-08-15 04:20:16 woofmeow

Я не добавляя ничего DOM во время цикла. Я только меняю css одного div. Также я попытался изменить FPS на 30, и это все еще происходит, но реже. Я бы хотел, чтобы он был более плавным, чем 30 кадров в секунду. У меня много дополнительной мощности процессора, это просто решение не перерисовывать по какой-то причине. – Curtis

@curtis, что происходит, когда вы меняете css, браузер должен перепрограммировать все, и это занимает память. Вместо этого, если вы попытаетесь добавить элементы в dom из domfragment, тогда он не будет делать столько вычислений reflow для макета.Положительный момент также заключается в том, что он будет работать более плавно из-за двух причин: 1) меньших переплавов и 2) уже будет содержать элементы в памяти (может быть не применим к вашему делу, но в любом случае лучше стратегия). – woofmeow

Был ли я понятен? Если нет, вы можете сказать мне .. Может быть, я неправильно понял @curtis – woofmeow

вы пытались с помощью GPU ускоряются анимации? Они должны дать вам лучшие результаты, поскольку они фактически привязаны к частоте обновления видеодрайвера. Управление анимацией с использованием JavaScript не будет вашим лучшим вариантом. И другой ответ, вероятно, на правильном пути, большинство устройств Android являются аппаратными недостатками, даже S3, поэтому вы получаете такую проблему. У меня есть тест Nexus 7 I, и много раз он просто не мог обрабатывать простые вещи, подобные этому, по сравнению с моими устройствами iPad2 и Windows 8 (планшеты &).

Это может быть разумно статье, чтобы продемонстрировать различия, http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

источник

2013-08-16 12:08:59

Я запускаю его на своем Lumina 920 (телефон для Windows), и он отлично работает BTW. –

Почему перемещение div оставляет след в javascript на телефоне?

ответ

Смежные вопросы