ionic-team / ionic-team/capacitor-assets

Sliding effect issue: Background inset causing overflow and black edges

Open
#600 0 comments 0 reactions 0 assignees View on GitHub
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.

![Safe zone within a rounded square mask](https://miro.medium.com/v2/resize:fit:640/format:webp/1*d3ieGM2uVdKjrlF9y-G-0w.png)
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.

![all icons masked](https://github.com/ionic-team/capacitor-assets/assets/14861524/e6b3c7e7-5a5a-4305-873b-8a469fac8954)
By limiting the drawing range to that of the example image, icons of various shapes can be well adapted without being cropped.

![scale to small](https://github.com/ionic-team/capacitor-assets/assets/14861524/7822979c-5719-4624-ae70-471e83fdca74)
If both foreground and background use inset (25% for emphasis), it will result in the appearance of black edges.

![maybe correct](https://github.com/ionic-team/capacitor-assets/assets/14861524/aebb5cc4-c9df-4ec4-88e3-a98df6f45869)
Would it be more feasible if only the background uses inset? Or should the drawing range be directly reduced when designing icons?

![affect croped](https://github.com/ionic-team/capacitor-assets/assets/14861524/cb9f6f48-2e90-4dfd-aa94-889614c6b48b)
This is a preview of the sliding effect, where you can see black edges appearing around the example icons.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.