Hi, we have an issue while scrolling a LazyColumn....

# compose-android

[Marco Righini]

Hi, we have an issue while scrolling a LazyColumn. It's reproducible in both debug and release mode.
Minimum reproducible sample https://github.com/marcorighini/lazy-column-scroll-artefact. Video and screenshot attached.

The issue is the following. With a background like 0xff020209 and items with background 0xff141416 while scrolling there are noticeable artefacts at the top and bottom edges of each cell, depending on the scrolling direction.
It doesn't happen if there's more contrast between the background and the items.

video.mov

[David]

Do you feel the video yeilds the same results as in real life? Because it could be some compression issue on the video and in real life you'll see this on oled screens where it turns off pixels

[Marco Righini]

It's way more visible when running on the device

[David]

Is it on a device with a variant of an OLED screen?

[Marco Righini]

yes, they are amoled

[David]

Try it on a non-OLED display and see if it occurs, chances are that you are trying to debug a hardware limitation with software.

[David]

OLED screens are poor going from a pixel off to something very dim.

[romainguy]

In addition, displays sometimes (always these days?) use a form of framebuffer compression which can be tripped up by certain types of contrasts (I remember we were chasing a “jpeg artifact” on a live wallaper until we realized it was the framebuffer compression because of the particular shades of blue that were used)

[romainguy]

Or when I implemented hardware acceleration of the UI stack for the Motorola Xoom

[romainguy]

My code was measuring at 60 fps but on screen it looked like 30… until I plugged in the tablet on a TV via HDMI and everything looked smooth

[romainguy]

Turns out the color transitions were so slow (up to 100+ ms) for some colors that it created a kind of motion blur that looked like a low framerate

[romainguy]

Anyway I don’t see an artifact in your video? At least when playing it back on my desktop monitor. So that would point to the hardware

[romainguy]

Oh one more thing, this could be a perception problem like Mach bands and other fun optical “illusions” from the HVS

[pepe]

@romainguy what type of panel does your monitor have? I can clearly see the artifacts in mine with an IPS panel 🤔

[seb]

Are the artefacts the few off-colour pixels on the top-right you see in the screenshot? They were hard to spot in the video, but I can see them now (IPS panel)

[romainguy]

@pepe IPS

[romainguy]

@seb the almost empty battery indicator? 😄

[seb]

I was just going to ask what they're referring to 😄

[seb]

Cause yeah that looks like the battery dying 😄

[seb]

And the blue bar looks like compression artefacts

[Marco Righini]

It's a blurred band, similar to a shadow, that appears on top of each cell when you scroll up and at the bottom of the cell when you scroll down.
In the screenshot is way less visible, but in mobile devices is evident.

[seb]

Ok now that you point it out, and that I zoomed in enough, I can see it. It looks like motion blur, which it can't be 😄

[seb]

I was looking at the screen edges, because I had misinterpreted the original message. It wasn't clear to me you were talking about item edges 🙂

[Marco Righini]

You are right, I've edited the description 👍

[romainguy]

Looks like an opposite Mach band to me 🤷

[romainguy]

(perception issue like I was referring to above)

[seb]

But why would a perception issue be captured in a screenshot?

[romainguy]

Because you are looking at the screenshot 😄

[romainguy]

Perception issues are caused by specific stimuli, doesn’t matter if it’s from a screenshot or not

[romainguy]

Here’s an example of a screenshot showing Mach bands:

[romainguy]

Screenshot 2024-07-29 at 10.22.32 AM.png

[romainguy]

The bright edge on the left and the dark edge on the right don’t exist in the data. It’s a pure smooth gradient

[romainguy]

Another fun example, both sides are the same color (0x7f7f7f):

[romainguy]

(but a slight gradient in the middle makes you perceive two different colors)

[romainguy]

One last one, all the small rectangles are exactly the same:

[romainguy]

All this to say that our perception can get really broken by contrast modulation, and knowing how our rendering pipeline works this is the only reasonable explanation for the OP’s original issue

[pepe]

🤯 I was today years old when I learnt about this

[romainguy]

I could go on. There are other fun effects that happen with chromatic colors, not just contrast/grays

[romainguy]

(like the fact that brown doesn’t exist 😂)

[romainguy]

I gave a talk on all of this to the Compose team, maybe I should give that talk publicly someday

[pepe]

I was manipulating Marco’s screenshot and found out something I’m not sure how to interpret. This is a screenshot of the screenshot (😅) in which I zoomed in, modified the exposure and used a magnifier, bands are different size inside the magnifier, should they be the same size if it is a visual effect?

[romainguy]

Did you upscale using nearest neighbor?

[pepe]

I used OS X Preview 😅 I’m not a graphics guy…

[seb]

https://kotlinlang.slack.com/archives/C04TPPEQKEJ/p1722274016418899?thread_ts=1722265054.476709&cid=C04TPPEQKEJ

We should just call it dark orange...

[romainguy]

The original screenshot seems resized already anyway

[seb]

Does Slack resize/recompress?

[romainguy]

I’ll just run the project locally

[pepe]

I’m very intrigued, thanks for the extra effort Romain

[romainguy]

Taking raw screenshots directly from a device shows 0 artifact at the pixel level

[romainguy]

At rest:

[romainguy]

In motion:

[romainguy]

Screenshot 2024-07-29 at 10.40.46 AM.png

[romainguy]

I should write a follow-up to https://docs.google.com/document/d/12W-n3nTl6C8-SyeP_trvKBXQirMLmvsGGl3yUlQsHaQ/edit?usp=sharing but for “pixel peeping”

[romainguy]

@pepe you might actually be interesting in the “Accessibility Zoom” section of that docs, and specifically “What to look out for”

[romainguy]

it tells you how you can zoom on anything on screen while preserving the original data

[pepe]

all clear, thanks a lot!

[Marco Righini]

@romainguy thanks a lot for all these details 🙏
One last curiosity, do you know why in the original issue the effect happens just on the top edges or the bottom ones depending on the scrolling direction?

[David]

From my experience when it comes to OLED displays it is usually when a pixel goes from off to on, but this is just anecdotal. That means if you scroll down you would see it in the bottom of the container in your scenario.