search

hatnote / weeklypedia

A weekly email update of all the most popular wikipedia articles
http://weekly.hatnote.com/
59 stars 27 forks source link

Background image causes visual jitter when scrolling #30

Closed quiddity-wp closed 4 years ago

quiddity-wp commented 4 years ago

The background image (diagonal stripes) at https://weekly.hatnote.com/ and subpages, causes intense visual "jitter" when I scroll.

Suggest: changing or removing the background image.

mahmoud commented 4 years ago

Interesting, curious what Stephen'll make of it. In the meantime, I'm thinking of a workaround, but I'm unable to reproduce on Firefox, I get a little bit of flicker on Chrome maybe. Would you mind sharing what browser are you using and zoom level are you at?

quiddity-wp commented 4 years ago

You're fast! And sure thing! Tested on:

Here's a screen-recording from the laptop: out-4.ogv.tar.gz

It's just distracting. I get the same distracting flicker when trying to scroll any page/image that consists of tight diagonal stripes. E.g. Zoom in 200% on this image and scroll to magnify the effects.

mahmoud commented 4 years ago

Interesting, that screen capture video looks fine on my Ubuntu 16 laptop. As a longtime Linux-on-the-desktop user, I think I know what you're talking about. I bet a video taken with your phone at high framerate would show it. Maybe a v-sync or refresh rate issue? Now I'm just curious, what version of mint on what display? And I guess maybe display chipset? (I'm guessing intel)

slaporte commented 4 years ago

I don't see it either, but I've been worried about the moiré-looking effect.

Do you see the same thing with more spaced out stripes? I'm wondering if we can stick with this diagonal stripe style, or we'll need to come up something new.

quiddity-wp commented 4 years ago

Moire effect!! That's the term I was trying to remember!

Yeah, i find it distracting on any size diagonal stripes.

I've tried playing around a bit with this: http://www.stripegenerator.com/ (click the tiny red-text "open fullscreen preview") to test.

I'll not share details about my configuration, just so that we don't tangent away from the abstract problem into resolving it for only me! ;D

slaporte commented 4 years ago

Hey @quiddity-wp how does this look? https://weekly.hatnote.com/

We're working on a few Weeklypedia updates on the backend, so we might as well refresh the design at the same time.

quiddity-wp commented 4 years ago

Solved! LGTM.

mahmoud commented 4 years ago

Great! Thanks :)