react-native-skia icon indicating copy to clipboard operation
react-native-skia copied to clipboard

Published 20 hours ago • verified publisher icon Shopify

clip path of Group component cause glitch on rerender.

Open kyimoemin opened this issue 2 years ago • 10 comments

Description

adding path to clip props of Group component cause glitch on canvas when rerender. I tested in two versions both cause the bug.

OS: Android

devices ( doesn't cause glitches in the android emulator)

  • Redmi Note 7 Pro.
  • Xiaomi Mi9
  • Samsung S8+
  • Samsung Note 10+
  • Samsung Fold 4 (only on the outer screen)

Version

0.1.156, 0.1.157

Steps to reproduce

https://github.com/kyimoemin/skiaTest

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

photo_2022-11-11_14-22-02

kyimoemin avatar Nov 11 '22 07:11 kyimoemin

We were not able to reproduce the example on android real device. We also tried on iOS and Web. Can you try with another android device to check if the bug also appear there with the exact same project?

wcandillon avatar Nov 12 '22 11:11 wcandillon

I think it only happens on some specific Android devices not happen in iOS, not sure about Web tho. in my case, it is Redmi Note 7 pro. One of my coworker face that bug too I'll update you soon after I ask him for the device info

kyimoemin avatar Nov 14 '22 04:11 kyimoemin

@wcandillon I updated the devices list

kyimoemin avatar Nov 15 '22 04:11 kyimoemin

the glitch also happen some component that doesn't use clip-path

kyimoemin avatar Nov 21 '22 11:11 kyimoemin

I have managed to reproduce this issue on 2 pixel devices as well (Pixel 3XL and Pixel 4XL). We are using a <Group> tag with the clip being an SkRect and outside the clipping area it renders parts of the canvas in a tiling manner. We have a list of paths we're adding from user input and every one we add alters the broken rendering

daentech avatar Dec 20 '22 13:12 daentech

Thanks for reporting this @daentech We have this example already: https://github.com/kyimoemin/skiaTest/blob/master/App.js Just in case, it sounds like you may have an even smaller example you could link here so we can test it as well? I am planning on getting one of these devices.

wcandillon avatar Dec 20 '22 14:12 wcandillon

hi @kyimoemin , @wcandillon any solution as I am getting similar issue, it seems that when you increase the padding, the canvas renders items multiple times. getting this bug in android

Hassaan68 avatar Feb 07 '23 15:02 Hassaan68

I just change to react native svg lib.

kyimoemin avatar Feb 07 '23 15:02 kyimoemin

@kyimoemin , nice and easy fix mate :D

Hassaan68 avatar Feb 07 '23 15:02 Hassaan68

having the same truoble, it happens to me when using expo bare and running with expo go app, running natively on android seems to be ok

SimasZurauskas avatar Mar 17 '23 09:03 SimasZurauskas