7

This image (source: Guardian Business) exhibits strange behavior when scrolling on some browsers. At 100% in Safari (on OS X on an LCD display), it flickers red when scrolling; at some zoom levels it exhibits a moiré-like pattern.

Stock market value

The flickering is distracting to me, and could obviously be avoided by using a solid fill instead of the dot pattern. But why exactly does it occur, and how could one show a similar pattern while avoiding the flickering?

Improve this question
10
  • Yes I see the flickering. People who wore fine checked shirts used to produce the same kind of effect on the TV.
    – PhillipW
    Sep 30, 2011 at 11:51
  • It would be helpful if the Close vote posted their reason.
    – gef05
    Sep 30, 2011 at 18:40
  • @Gary - it isn't a UX question. It's a technical question.
    – Charles Boyung
    Sep 30, 2011 at 20:11
  • 1
    @CharlesBoyung I think that's a false dichotomy. My question had two parts—a technical part and a design part, all directly related to the overall user experience when interacting with a type of image.
    – Dan
    Sep 30, 2011 at 20:29
  • @Dan - Why do some patterns flicker in strange colors while scrolling? That is a purely technical question with a purely technical answer. Just look at the answers that you got. Both of them (including the one you accepted) are technical answers. No UX part in either answer whatsoever. If you had a UX question in there, why did you accept an answer with no UX aspect to it?
    – Charles Boyung
    Sep 30, 2011 at 20:35

2 Answers 2

Reset to default
8

The issue is in this due the shading being done with a regular matrix of squares in two colors in classic newsprint style. It leads to two problems:

  1. At small scale, the matrix dimensions do not evenly divide into the screen pix available. The rendering algorithms try their imperfect best, but an uneven shading results (including the gradient towards the darker border lines). That's exactly what you have here (as you can see be zooming to different scales and examine with a magnifying glass). When you scroll, the shading divisions change as the shading grid moves over the pixel grid and the math resolving the fit comes up with different answers (actually nothing to do with screen response times.. it is a classic stroboscopic effect). Once you zoom out to the point that there is no detectible issue in drawing the shading grid within the pixel grid, the effect stops.
  2. But at that point, you run into another problem.. The Herman grid illusion - which is interesting but probably not what you want your users focused on;-)

If you avoid shading with regular patterns and a small palette you shouldn't have the problem.

Regarding the flickering red, I'm not so sure as I don't see that on my screen. That aspect may be a technical idiosynchrasy of your display or graphics card/driver trying to deal with shading the grid.

Improve this answer
6

It happens because the pixels on an LCD take a non-zero amount of time to transition between on (black) and off (white). The larger the change, the longer it takes. Essentially the effect is due this, but is made obvious due to the uniformity and fineness of the pattern.

Scale up the pattern to have larger white/black areas and the effect will be less noticeable.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.