1

I have a small site that takes advantage of a neat scrolling trick and jQuery's .addClass()

Basically, The site checks to see if you've scrolled past a certain point and then sets the class on an element, causing it to have extra transformations or animations.

In Chrome 23.x, There is no issue with the code;
But in Webkit based browsers on Mac, and Chrome 27.x+ (Lowest I've gotten reports of the bug) in other operating systems, The elements "Duplicate" when the class is removed.

The bug has never shown up in Firefox

Here is the Javascript 

<script>
  $(window).scroll(function () {
      navi = $('#navi').height();
      logo = $('#navi .logo img').height();
      user = $('#user').height();

      if ($(window).scrollTop() >= navi - logo) {
          if (!$('#navi').hasClass("active")) {
              $('#navi').addClass("active");
          }
      } else {
        $('#navi').removeClass("active");
      }
      if ($(window).scrollTop() >= user) {
          if (!$('#user').hasClass("active")) {
              $('#user').addClass("active");
          }
      } else {
        $('#user').removeClass("active");
      }
  });
</script>

I'm not 100% that the Javascript is at fault; It may be CSS in Webkit that is causing the issue, either way it is causing me grief.

Here is a Youtube Video of the expected results, and here is a Screenshot of the "Dupe" bug (I run Chrome 23.x in Linux so I had a friend take the screenshot)
The page can be found at dev.brokengear.net/gatesofender

Upon further digging, It appears to be an issue with certain browsers artifacting due to it's Tile-Based rendering system.

4

3 に答える 3

1

Chrome でも同じバグがありました (Windows 7)。スクロールする要素position:fixedが複製されました: 1 つは固定されたままで、もう 1 つはスクロールします。

私の場合、transformコードに上記のプロパティを持つ要素があったために発生しました。

fix-webkit-backface-visibility: hidden; :重複する要素 (固定要素) を追加します。

于 2015-08-26T09:46:51.257 に答える
0

判明したように、Webkit ベースのブラウザー (Chrome を含む) には、わずかにバグのあるタイル ベースのレンダラーがあり、特定の期間に Renter-Tree のリフローが多すぎると失敗します。

私が得ていた特定のアーティファクトは、私が行っていたレンダ ツリーの更新の数をレンダラーが処理できなかったことが原因でした。スクロールはこれらの多くを引き起こします。

私の回避策は、「タイムライン」機能と「ペイントされた領域を表示」オプションをオンにしてページを調べ、最も更新されたものを監視し、ページの他の領域でそれをトリミングしてリフローを減らすことでした.

そして、この問題にはほぼ 1 年前のバグがあったようです。私は自分の情報を提供し、将来の開発者のために修正するのを手伝いましたhttp://code.google.com/p/chromium/issues/detail?id=151734

于 2013-08-22T01:45:21.957 に答える