search

pwa-builder / PWABuilder

The simplest way to create progressive web apps across platforms and devices. Start here. This repo is home to several projects in the PWABuilder family of tools.
https://docs.pwabuilder.com
Other
2.69k stars 282 forks source link

Android: problem with maskable icon #2153

Closed clementbirkle closed 2 years ago

clementbirkle commented 2 years ago

Hi,

I use PWABuilder to generate the Android package.

PWABuilder uses this image for Android: https://app.toolcie.com/assets/images/icons/maskable/512x512.png (icon is conform to https://developer.android.com/distribute/google-play/resources/icon-design-specifications#attributes)

After installed the app, the result is: android-tc

I don't know if the problem come from PWABuilder or Bubblewrap.

Do you have an idea why the icon is cropped (without padding)?

Thank you in advance for your help.

ghost commented 2 years ago

Hello clementbirkle, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will investigate the issue and help solve it ASAP. Other community members may also look into the issue and provide feedback 🙌

JudahGabriel commented 2 years ago

@clementbirkle I just tried it on my Pixel emulator, here's what I see:

image

That looks correct to me. What device are you trying on?

clementbirkle commented 2 years ago

@JudahGabriel I just try with Google Emulator and I have exactly the same render as like you. The display is not really correct.

The icon in the center should be 75% of the image size. In the simulator, the icon is at 88%. test-icon

When I try to install the app for real (from the Play Store), I don't see that (almost without padding).

I noticed this problem with:

Remark: with Honor 20 Pro, there is 2 pixel of padding... so apparently it's depend of which device you use.

JudahGabriel commented 2 years ago

Fair enough. I verified we're sending your maskable icon down to Bubblewrap. I suspect the issue is either in Bubblewrap or lower.

Can you open this issue on the Bubblewrap repo? Because it appears PWABuilder is doing the right thing.

jgw96 commented 2 years ago

Hey @clementbirkle ! You may could also check your Icon with the tool mentioned in this article https://css-tricks.com/maskable-icons-android-adaptive-icons-for-your-pwa/

clementbirkle commented 2 years ago

@JudahGabriel thank you very much to verified this thing.

@jgw96 thank you for the link. I created a new icon with the safety zone (60%) and now the padding is better !