[iOS] RoundedRect clipping bug

[dylancom]

Description

I am using react-native-skia so I can create buttons that use filters such as an "inner shadow".
When using multiple Rounded Rects, and centering them horizontally, I have noticed that some are clipped on the right by approx 1 pixel. If I remove the horizontal centering, the clipping bug disappears.

Notice the 3rd "button" not being perfectly rounded on the right.

When placing a background color on the <Canvas> I have noticed that it's the RoundedRect sometimes taking 1 pixel less on the right, but the Canvas itself always has the correct width.

Version

0.1.182

Steps to reproduce

1. Create a reusable component that consists of a <Canvas> and a <RoundedRect>.
2. Place multiple instances of that component within a <View> that has a "row" direction.
3. Place the row View within a container View that centers the row view horizontally.

Snack, code example, screenshot, or link to a repository

https://github.com/dylancom/react-native-skia-clipping

[william-candillon]

Could it be due to pixel rounding?
https://reactnative.dev/docs/pixelratio
I've made a video on this topic: https://www.youtube.com/watch?v=a8EWaNVxXz4

[dylancom]

Thanks for the fast reply.
Ah I see that the 3rd one is not exactly 96 pixels by using onLayout on the Canvas.

 LOG  {"layout": {"height": 48, "width": 96, "x": 0, "y": 0}, "target": 3}
 LOG  {"layout": {"height": 48, "width": 96, "x": 104, "y": 0}, "target": 5}
 LOG  {"layout": {"height": 48, "width": 95.99998474121094, "x": 208, "y": 0}, "target": 7}

Making use of roundToNearestPixel doesn't change the behavior though.

[william-candillon]

Should we close the issue or do you think there is something that could/should be done on our side?

[william-candillon]

you draw a rect of width 96 on a canvas of 95.999 and it looks like one pixel has been clipped because to some rounding.
This seems ok no?
I am not sure what would be the expected behaviour nor if there is something we can do on our side.

Where the rounding happened exactly because there are a lot of operations done related to pixel density on both RN and Skia at different places.

[dylancom]

Yes, the canvas actually rendering a width slightly less than the requested 96 is indeed causing the clipping.
Oke, I thought there might be some workaround but using roundToNearestPixel doesn't fix anything in this case.

[dylancom]

Update: I just found a workaround.
If you horizontally center the buttons with a marginLeft using a rounded number, the problem is gone.
(instead of using alignItems: 'center')

So for e.g. marginLeft: Math.round(availableSpace / 2).

[wcandillon]

@dylancom could roundToNearestPixel the size of the flex container work too? I will close this issue since the same would happen with a regular view? But if there is something specific to Skia here, please let us know and we will reopen this issue.

[dylancom]

Let me try it, thanks for the suggestion. It's specific to using this library. There is no clipping when I use regular views to create rounded buttons or circles. (I'm using this library though to create inner shadows, which I can't with a regular view)

It also happened when I had a heading with a bottom border using StyleSheet.hairlineWidth and placing multiple circles, created with Skia, below. The bottom of the circles would be clipped by approx 1px. (Unless I add a negative margin top of the size of the hairlineWidth to the circles, which fixes the clipping).

[wcandillon]

@dylacom This sounds interesting, could you provide us with a small example where you display these three buttons as RN View (and maybe set a border of harlineWidth) and then below have the same with Skia view instead? We will definitely investigate it if they produce a different result.

[dylancom]

@wcandillon see the following examples (https://github.com/dylancom/react-native-skia-clipping/blob/main/App.tsx):
Tested on a iPhone 14 Pro simulator.
The added bottom border (using hairlineWidth) to the titles causes extra clipping to the bottom.

[wcandillon]

Thank you for the nice reproducible example, I can confirm that something is off here.