iOS 9およびiOS 10.1.1を実行しているiPhone 7でアイソトップレイアウトメソッドが動作しない

Question

私は非常に奇妙な問題に遭遇し、その根を特定できませんでした。私は従業員プロファイルの要約を表示するクライアントのWordPressサイトにセクションを作成しました。ユーザーは、同じページの投稿を展開する「もっと読む」リンクをクリックすることができます。

要約テキストを完全な記事テキストに置き換えるjavascriptを（jqueryを使用して）書き、要素にクラスを追加して全幅にした後、アイソトープ（ 'layout'）を呼び出して要素の仕方を再調整します配置される。しかし、何らかの理由でアイソスポア（「レイアウト」）が特定のiOSデバイス（サファリでもクロムでもない）で発射されないため、iOSの問題だと思うようになります。何に

//-------------- 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; 
    }); 

どれ洞察力： - ここで読むより多くの機能を処理する特定のセクションがあるhttp://udot-intranet.pennapowersdev.com/spotlights/

はコードがscripts.jsにあります。ここでは

は、ページの段階的なバージョンです。問題を引き起こすことは非常に高く評価されるだろう。

UPDATE：この理由はわかりませんが、isotopeの初期化時にオプション "percentPosition"を削除することで問題は解決しました。

Answer 1

この問題は、モバイルデバイスがJavascriptをどのように処理するかによって発生している可能性が高いです。 Appleはスクロールが完了するまでJSの実行を一時停止します（負荷を減らしてバッテリー寿命を改善するためにこれを行います）。プラグインスクリプトが約束を利用していない場合、そのJSの一時停止中にコールバックが無視される可能性が非常に高くなります。

私は、readThreadをクリックしたときにscrollTop（）を呼び出すことに気付きました。これにより、スクロールが完了してコールバックが失敗する可能性が高くなるまでスクリプトが一時停止します。プロミスを使用するか、再試行の前にスクロール完了をチェックするハンドラの中で中継コールを配置してください。