Метод изотоп-макета, не работающий на iOS 9 и iPhone 7 с iOS 10.1.1

Question

Я столкнулся с очень странной проблемой и не смог выяснить ее корень. Я создал раздел на сайте Wordpress клиента, который показывает резюме профиля сотрудника. Пользователи могут нажать ссылку «читать дальше», которая расширяет сообщение на той же странице.

Я написал несколько javascript (используя jquery), который заменит итоговый текст на полный текст статьи, добавит класс к элементу, чтобы сделать его полной шириной, а затем вызовите изотоп ('layout'), чтобы скорректировать, как элементы организованы. Но по какой-то причине изотоп («макет») не срабатывает на некоторых устройствах iOS, будь то сафари или хром, заставляя меня думать, что это проблема iOS.

Вот поставил версию страницы: http://udot-intranet.pennapowersdev.com/spotlights/

Код находится в scripts.js - вот конкретный раздел, который обрабатывает читать больше функциональных возможностей:

//-------------- Read More Post Shortening -----------------// 
    var read_more_click = false; 

    $container.on('layoutComplete', 
     function(event, laidOutItems) { 
     if(read_more_click){ 
      console.log("layoutComplete"); 
      $('html, body').animate({ 
       scrollTop: $this_post.offset().top - 50 
      }, 'fast', function(){ 
       $('html, body').off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove"); 
      }); 

      $('html, body').on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){ 
       $('html, body').stop(); 
      }); 
      read_more_click = false; 
     } 
     } 
    ); 

    var $this_post = ''; 
    var post_scrollTop = 0; 

    $(document).on("click", '.post_list .read_more', function(){ 
     $this_post = $(this).parents(".post_item"); 
     read_more_click = true; 
     console.log('read more fired'); 
     if($this_post.hasClass("excerpt")) { 
      $(this).text('< Read Less'); 
      $this_post.removeClass("excerpt"); 
      $this_post.addClass("full"); 
      $container.isotope('layout'); 
     } else { 
      $(this).text('Read More >'); 
      $this_post.removeClass("full"); 
      $this_post.addClass("excerpt"); 
      $container.isotope('layout'); 
     } 

     return false; 
    }); 

Любое проникновение в то, что что вызвало бы проблему.

UPDATE: Не уверен в аргументации для этого, но, удалив опцию «percentPosition» при инициализации изотопа, она устранила проблему.

Answer 1

Проблема, скорее всего, в результате того, как мобильные устройства обрабатывают Javascript. Apple приостанавливает выполнение JS до тех пор, пока прокрутка AFTER не завершится (они уменьшают нагрузку и, таким образом, увеличивают время автономной работы). Если сценарий плагина не использует обещания, очень возможно, чтобы обратный вызов был проигнорирован во время этой паузы JS.

Я замечаю, что вы вызываете scrollTop(), когда нажимается клавиша read more. Это приостановит ваш скрипт до тех пор, пока прокрутка не будет завершена и не будет увеличена вероятность пропущения обратного вызова. Попробуйте либо выполнить обещания, либо поместить вызов ретрансляции внутри обработчика, который проверяет завершение прокрутки перед запуском.