StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery or Webkit duplication bug
text
Body
copied!<p>I have a small site that takes advantage of a neat scrolling trick and jQuery's .addClass()</p> <p>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.</p> <p>In Chrome 23.x, There is no issue with the code;<br> 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.</p> <p>The bug has never shown up in Firefox</p> <p>Here is the Javascript </p> <pre><code><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> </code></pre> <p>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.</p> <p>Here is a <a href="http://www.youtube.com/watch?v=ZTIb6WPthtk" rel="nofollow">Youtube Video</a> of the expected results, and here is a <a href="http://gyazo.com/03d1f8e0573c7c2dc29ce647ad5c10c0" rel="nofollow">Screenshot</a> of the "Dupe" bug (I run Chrome 23.x in Linux so I had a friend take the screenshot)<br> The page can be found at <b>dev.brokengear.net/gatesofender</b></p> <p> Upon further digging, It appears to be an issue with certain browsers artifacting due to it's Tile-Based rendering system.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload