Flying memes

Dealing with stripe patterns and scrolling

Recently I’ve been dealing with a page containing a stripe pattern as following:


If you scroll a page containing this kind of pattern you obtain a strange effect, sometimes the box seems to appear all black, like if the eyes cannot refresh fast enough. You can try this problem by watching this fiddle and trying to scroll.

The best way to solve this problem is using background-attachment: fixed but sometimes this is not possible, in that cases the only solution I found was to listen to the page scroll and switch between two images with inverted stripes. We can use a sprite to handle both images:

And then switch between the two images on the sprite using a check triggered by requestAnimationFrame

var grid = $('#grid').eq(0);

function adjustposition(){
  "use strict";

  grid.css('background-position', $(window).scrollTop() % 2 === 0 ? '0 -60px' : '0 0');

Here’s the working demo: