8

Chrome を使用して Web サイトを開発しているときに、次の動作に気付きました。ページを一番下までスクロールしているときにページを更新すると、垂直方向のジャンプが見られます。

次のBootplyを参照してください。

再現するには、フルスクリーン プレビュー (右側のモニター アイコン) を開き、次のことを試してください。

  1. ページを更新 (フォームの再送信を確認) --> ジャンプなし
  2. 中央にスクロール、更新 (フォームの再送信を確認) --> ジャンプなし
  3. 一番下までスクロールし、更新 (フォームの再送信を確認) --> 垂直ジャンプ

.align-centerジャンプは実際には、ページにクラスの図が含まれている場合に垂直のリズムを維持しようとする次の Javascript によって引き起こされます。

$(document).ready(function() {
  $(window).resize(function() {
    var baseline = parseInt($('body').css('line-height'), 10)
    $('.align-center').each(function() {
      var height = $(this).outerHeight();
      console.log(height)
      var bottom = baseline - (height % baseline);

      if (bottom != 0)
      {
        bottom += parseInt($(this).css('padding-bottom'), 10)
        $(this).css('padding-bottom', bottom);
      }
    });
  }).trigger("resize");
});

もちろん、この Javascript を削除すると、観測された垂直ジャンプも削除されます。私が理解していないのは、DOM の準備ができたときにパディングが適用されるため、目に見える垂直ジャンプが発生しないことです。ジャンプは、ページが一番下までスクロールされたときにChromeがビューポートを処理する方法に関係していると思いますが、これを確認/確認する方法が本当にわかりません。

これを Firefox または Safari で試してみると、ジャンプは見られません。

何かアイデアはありますか？

編集: Chrome のバグ トラッカーでバグを開きました。

4

2 に答える 2

1

まず第一に、私は Chrome 開発者でも他の公式ソースでもないので、あなたを失望させなければなりません。しかし、私はこの問題に時間を割き、見つけたものを共有したいと考えました. 後世のためにね。

おそらくお持ちのようalertに、コードに s をいくつか入れて、正確に何が起こっているのかを観察しようとしました。ビューポートがレンダリングされ、Javascript が実行され、パディングが適用され、残りのコンテンツ全体が押し下げられ、Chrome がビューポートの高さを認識して修正し、追加のパディングに対応するように思えます。私には正直なレンダリングのバグのように見えます。

そうは言っても、少なくとも私のテストでは、効果を修正するものを見つけました. これがあなたの環境に当てはまるかどうかはわかりませんが、レンダリングの問題をさらに診断するのに役立つかもしれません.

パディングの代わりにマージンにスペースを追加するだけで、それができました。

if (bottom != 0)
{
    bottom += parseInt($(this).css('padding-bottom'), 10);
    $(this).css('margin-bottom', bottom);
}

たぶん、他の誰かが実際の説明を思い付くことができます. この不安な行動の正確な原因を知りたいと思います。

于 2014-05-19T10:21:01.523 に答える