rive-app / rive-app/rive-react
Artifact on the edge of canvas
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.2k
- Forks
- 58
- Avg merge
- 3h 23m
- Merged PRs (30d)
- 6
Description
Hi folks,
We've noticed an issue. When the rive element edges are visible to the parent element, we get some line artifacts. It was the same on top/bottom and left/right (depending on how we scaled it).
Here's a video of the issue:
https://github.com/user-attachments/assets/c298a766-3b52-4740-a878-f7af147e36cb
The rive file in question:
https://drive.google.com/file/d/1GW9JN5MjOWihuB38OzkfYpNg_m8PTAOc/view?usp=sharing
Please let me know if you need further info.
Tested on:
Chrome: Version 137.0.7151.120 (Official Build) (arm64)
Safari: Version 18.5 (20621.2.5.11.8)
Firefox: 140.0.1 (aarch64)
MacBook Pro 14-inch, Nov 2023, Apple M3 Pro, MacOS 15.5 (24F74)
"@rive-app/react-canvas": "^4.21.4",
"@rive-app/react-webgl": "^4.21.4",
"@rive-app/react-webgl2": "^4.21.4",
"@rive-app/webgl": "^2.30.1",
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the artifact with the linked Rive file and the listed @rive-app React canvas and WebGL packages, testing the edge-scaling cases shown in the video. Compare behavior across the listed browsers; done means the visible line artifacts no longer appear when the Rive element edges meet the parent element.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- computer-graphics, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100