Icon gets cropped
toniengelhardt opened this issue · 17 comments
The auto-generated icon gets cropped on Android (Chrome) and iOS (Safari). Chrome desktop seems to work fine. Maybe an issue with the maskable option, which I think is missing.
Icon size is 512x512, is that too small? I have another app with the @nuxtjs/pwa where 512x512 works fine. If that is the issue and x1024 is required or so I think it would not be a problem and would be happy to create a PR mentioning that in the README.
It sounds like normal to me, your icon has white background, and Android is fitting your icon within a circle, therefore your white rectangle it just hidden by the circle shape.
EDIT: That said, if the exactly same icon works with @nuxtjs/pwa, there must be something to improve indeed. I would need to know what is the display result with @nuxtjs/pwa with your icon.
Maybe related to the maskable option. @nuxtjs/pwa has a general icon setting for purpose, which is by default ['any', 'maskable']. But this is actually also not ideal. I think the most convenient option would be to be able to specify two icons, 'default' and 'maskable' and the module generates all specified sizes (or the defaults) for both.
@kevinmarrec Yep, having icons with both any & maskable purposes lead to Google Lighthouse warnings.
This is why I've been implementing independent generation of maskable icons.
Sounds like a great idea to be able to give path to another icon for maskable purpose !
Yes exactly and devices (Android, iOS) seem to have different preferences with [any, maskable].
The problem with @nuxtjs/pwa ism as far as I understand it, that you can either have auto-generated icons with the same setting, or you have to generate all icons yourself if you want both, which is kinda annoying.
@toniengelhardt Please have a try on v0.8.0, with icon.maskableSource, or just add icon.maskable.png in public folder, it will be taken out of the box :)
@kevinmarrec amazing, epic idea to use icon.maskable.png as default!
However, it doesn't solve the original problem. I can see the maskable icons in Chrome dev tools but the black borders are still around. Maybe the PWA needs to be configured to use the maskable icon as default for the icon/install/launch screen somehow?
A few more insights...
On Android the black borders show up when installing the PWA and in the launch screen, but are not present in the home screen icon.
On iOS they are present in install screen and icon, but not in the launch screen.
@toniengelhardt Well if you check the icons generated there is no black border, so I'm note sure what causes it on install 👀
@kevinmarrec I'll investigate
@toniengelhardt I am having the same issue, did you manage to resolve it?
@LukaZeleznik yes, it works when you set the padding to 0 in the settings, but I feel like that should be the default setting to work out of the box.
@toniengelhardt I came to the same solution, and I agree that that should be the expected behaviour out of the box.
Did you notice any issues on iOS/Android with this approach though?
I am thinking on using icon.maskable.png, with the image having a bit more padding, or is that unnecessary?
@LukaZeleznik haven't tried it yet, but I also have an Android TWA that I still need to upgrade from Nuxt 2 and the original pwa module (which worked for me out of the box but didn't have proper maskable support).
I would need to have one more look on this one, I don't remember having able to reproduce it as it may differ from device to device ? It may have different behavior depending on the OS ? I don't know
We should create another issue for it
I would need to have one more look on this one, I don't remember having able to reproduce it as it may differ from device to device ? It may have different behavior depending on the OS ? I don't know
Probably, I see it on the latest Android on a Pixel 5. Might be different with different Android flavors.
Opened #77 to track it