Visual Regression on Android on v2.3.13

[hirvesh]

Description

Hello! 👋

I noticed a slight regression visually on Android as from v2.3.13. There seems to be a border/inset and some clipping happening as I re-render this grid of squares built with Skia. v2.3.12 works fine - look closely at the squares in the grid as I check the button for each of the habits in the list.

Not sure what's causing it, but I will try to extract a minimum reproducible example out of my app to showcase.

Screen_Recording_20251118_124552_Habit.Pixel.mp4

React Native Skia Version

2.3.13

React Native Version

0.79.5

Using New Architecture

• Enabled

Steps to Reproduce

N/A - will try to extract a reproducible example and update the issue with it.

Snack, Code Example, Screenshot, or Link to Repository

N/A

[wcandillon]

The app looks amazing! This report is credible. However it's hard for me to understand the screen recording. Can you use the coldStart property to see if the result is different? <Canvas ... coldStart />

…

On Tue, Nov 18, 2025 at 9:52 AM Hirvesh ***@***.***> wrote: Description Hello! 👋 I noticed a slight regression visually on Android as from v2.3.13. There seems to be a border/inset and some clipping happening as I re-render this grid of squares built with Skia. v2.3.12 works fine. Not sure what's causing it, but I will try to extract a minimum reproducible example out of my app to showcase. https://github.com/user-attachments/assets/9b4828a6-84b7-4c07-8a8d-5ae3cdef8454 React Native Skia Version 2.3.13 React Native Version 0.79.5 Using New Architecture Enabled Steps to Reproduce N/A - will try to extract a reproducible example and update the issue with it. Snack, Code Example, Screenshot, or Link to Repository N/A — Reply to this email directly, view it on GitHub or unsubscribe. You are receiving this email because you are subscribed to this thread. Triage notifications on the go with GitHub Mobile for iOS or Android.

[hirvesh]

Thanks @wcandillon - coming from you, it's high praise haha - this goes right on my landing page 🤣

Alright, I tried coldStart and it no longer occurs. I've tried to zoom in on the video to show you exactly what happens. You can see visually the squares change as I do the "check-in" which - re-renders the grid.

skia-artifact.mp4

[wcandillon]

if you could provide me with a small reproduction that would be big. Also is this happening on a particular kind of device or any android phone/emulator?

…

On Tue, Nov 18, 2025 at 12:40 PM Hirvesh ***@***.***> wrote: Thanks @wcandillon - coming from you, it's high praise haha 😄 Alright, I tried coldStart and it no longer occurs. I've tried to zoom in on the video to show you exactly what happens. You can see visually the squares change as I do the "check-in" which - re-render the grid. https://github.com/user-attachments/assets/74cc645b-8433-4d92-9cfe-80f84669461c — Reply to this email directly, view it on GitHub or unsubscribe. You are receiving this email because you were mentioned. Triage notifications on the go with GitHub Mobile for iOS or Android.

[wcandillon]

@hirvesh I am quite intrigued by this regression, let me know if you have small reproduction for me

[hirvesh]

Hey @wcandillon! I tried to re-create a reproducer but it was not happening in the barebones version. So I started commenting out parts of my skia component and found out it was this day label component which was causing it:

So when I commented it out, no visual regression in the grid, but when it's included there is. Obviously, I started poking around and playing with props.

The component structure is like so:

XStack -
- horizontal scrollview > skia canvas grid
- skia canvas day labels

This is the code for the day labels. So changing marginRight from 3 to 2 fixed it. Any odd number right margin seems create the issue 🤷‍♂️

I am on a Samsung Galaxy A35 - I don't notice the same issue on Android emulator...so probably very very specific.

 <Canvas style={{ width: canvasWidth, height: canvasHeight, marginRight: 2 }}>
      {/* Align with weeks group translate so the first row starts at y=0 */}
      <Group transform={[{ translateY: 0 }]}>
        {labels.map((label, index) => {
          const y = index * (SQUARE_SIZE + GUTTER_SIZE) + baselineOffset
          return <Text key={`day-label-${index}-${pixelFont ? 'silk' : 'inter'}`} x={canvasWidth - 10} y={y} text={label} font={activeFont} color="gray" />
        })}
      </Group>
    </Canvas>

[wcandillon]

that's interesting, maybe React Native does some rounding which doesn't happen when we "warmup" the view: https://reactnative.dev/docs/pixelratio#getpixelsizeforlayoutsize
PixelRatio.get() is 3 on Samsung Galaxy A35?
If you could be a small standalone example where playing with a small pixel number (like 2 to 3 as you mentioned) also to reproduce the bug, I would be very grateful. It would love to get to the bottom of this.

[hirvesh]

@wcandillon - Pixel ratio is a nice rounded 2.8125 😅

I will try to replicate it best during the week and post here...

[wcandillon]

these are tricky. In 2.4.1 we removed coldStart and it should work as expected: https://shopify.github.io/react-native-skia/docs/canvas/overview