ionic-team / ionic-team/capacitor-assets
Sliding effect issue: Background inset causing overflow and black edges
- Dominant language
- TypeScript
- Stars
- 583
- Forks
- 116
- PR merge metrics
- No merged PRs in 30d
Description
https://github.com/ionic-team/capacitor-assets/blob/6b2a5d4e542a1e0de5e9001bc447d89b9b1b5443/src/platforms/android/index.ts#L365
When using a value of 16.7% as the inset for both foreground and background, it will cause parts outside of the background to be revealed during the sliding effect, making it appear as if the sliding has exceeded the boundaries.

This is an example image([source](https://medium.com/google-design/designing-adaptive-icons-515af294c783)) being used. Theoretically, the foreground icon should be drawn within a range of 66dp or 72dp, rather than being drawn within the entire image range, as some parts will be clipped.

By limiting the drawing range to that of the example image, icons of various shapes can be well adapted without being cropped.

If both foreground and background use inset (25% for emphasis), it will result in the appearance of black edges.

Would it be more feasible if only the background uses inset? Or should the drawing range be directly reduced when designing icons?

This is a preview of the sliding effect, where you can see black edges appearing around the example icons.
Contributor guide
Assessment
This issue has not been assessed yet.