opened
peterpeterparker
username_0
**Describe the bug**
When I generate an APK with the PWA builder, the resulting splashscreen is glitchy. The bottom of our logo is not round (anymore, used to be ok in a previous  version of the tool).

Moreover, which we don't see that well on the screenshots, it seems  that the logo is  surrounded  by a really  super  thin border (like "border: 0.1px solid white").

**History**
I have opened a previous [issue](https://github.com/pwa-builder/PWABuilder/issues/947) in PWABuilder but as it relies on Bubblewrap, I was forwarded here.

**Info**
Maskable icon: https://deckdeckgo.com/assets/favicon/android-chrome-512x512.png

Manifest.json: https://deckdeckgo.com/manifest.json

Google play: https://play.google.com/store/apps/details?id=com.deckdeckgo.twa

**Screenshots**

Previously:

![87219139-1cbee680-c359-11ea-8302-7f6ed9cdb90a](https://user-images.githubusercontent.com/16886711/87578999-8d596080-c6d5-11ea-9572-73f78d07ebb9.jpg)

Newly:

![87219145-25afb800-c359-11ea-8be7-17580b519acf](https://user-images.githubusercontent.com/16886711/87579014-95b19b80-c6d5-11ea-91ba-d893242f0241.jpg)
Maskable icons glitch
issue
created
JudahGabriel
username_1
@username_2 I don't think this is PWABuilder-related. PWABuilder is passing the 512 images to Bubblewrap. Any idea why he's seeing visual artifacts in his splash screen.
comment
created
andreban
username_2
The maskable image is applied to the icon. The regular icon is used for the splash screen: https://deckdeckgo.com/assets/favicon/icon-default-512x512.png

It seems the artifact comes from the icon in the manifest. This is what the image looks like:
![splash](https://user-images.githubusercontent.com/1733592/87585981-be3a9500-c6d7-11ea-80b3-e4d587bba1d0.png)
comment
created
peterpeterparker
username_0
Thx for your feedback, both of you.

Is the regular icon instead of the maskable icon use for the screenshot on purpose?

- If no, should the maskable one be used or that does not make sense?

- If yes, @username_1 maybe it should be a new option or info in the pwabuilder to make it obvious to user that the regular one is used?
comment
created
andreban
username_2
Yes, the regular icon is used for the splash screen on purpose - maskable really only makes sense for the launcher icon. The same is true for PWAs installed via add to home screen.
comment
created
peterpeterparker
username_0
Makes sense.

I can recreate a TWA knowing the regular one is used. Should this issue be closed or remain open?

Even  though it is cleared which icon is used, I kind of think that there is a small glitch but as I don't know the all process, maybe it all make sense and therefore I have absolutely no problem about closing this issue.

For example, if I add a color to the background of the source image, then we can notice that there is no extra "white" borders as these in the screenshot above which has been generated.

<img width="659" alt="Capture d’écran 2020-07-15 à 21 38 21" src="https://user-images.githubusercontent.com/16886711/87588500-111a4980-c6e4-11ea-9588-bc07ef69fd55.png">
comment
created
andreban
username_2
This seems to be due to the change on #193. It seems the resize process has compression enabled, which is generating the artifact.
comment
created
peterpeterparker
username_0
Understood, thx @username_2 for the answers and time 👍
comment
created
andreban
username_2
Quick update - I was looked into this today. The issue is caused when `sharp` resizes the image.

My theory: It seems the issue happens when interpolating transparent pixels with regular pixels - assuming a transparent pixel looks like: `rgba(255, 255, 255, 0)`, interpolating with a value like `rgba(255, 0, 0, 255)` will generate lighter tones of red while changing the transparency.

The following switches to a different algorithm to resize / interpolate images. Since it doesn't interpolate values, but selects the value from neighbouring pixels, the issue doesn't happen.

```typescript
    await sharp(data, {density: 2400})
        .resize(size, size, {kernel: 'nearest'})
        .png()
        .toFile(fileName);
```
The downside is that the output image has lower quality.

Another option is getting rid of transparency altogether and paint the background with fixed color:
```typescript
    await sharp(data, {density: 2400})
        .resize(size)
        .flatten({background: '#c74707'})
        .png()
        .toFile(fileName);
```
But this would mean that the launcher wouldn't be transparent anymore, and wouldn't mach the underlying platform in some cases.

I'm still looking into alternatives.
comment
created
peterpeterparker
username_0
Thx for the update @username_2 

If it takes too much time or if you don't find any super solution, it isn't a problem to me if we close the issue. I mean I can always do some change logo form or color, just saying. But happy to hear that you are having a look!
comment
created
JudahGabriel
username_1
I have encountered a possibly related issue. 

This week I updated my existing PWA (web view-based) to TWA via PWABuilder+Bubblewrap. 😎 The new app works great (shortcuts and push notifications 🎉)! Except for one thing, the icon is showing some weirdness:

![image](https://user-images.githubusercontent.com/312936/87865123-1e267b00-c926-11ea-82d5-ae9f27168067.png)

Notice the edges of the icon are showing some white area around the edges. This is on a Pixel 3a emulator.

My app [manifest is here](http://messianicradio.com/manifest.json). I double-checked: PWABuilder is sending [this 512x512 image](https://messianicradio.com/images/chavah512x512.png) as the icon, and passing [this 1000x1000 image](/images/chavah-maskable1000x1000.png) as the maskable icon. As you can see, there is no white on either of those images.

Is this related to the above image resizing problem? Should I be passing in a different image size to Bubblewrap? (PWABuilder defaults to the first 512x512 image, then fallsback to 192x192.)
comment
created
andreban
username_2
@username_1 this looks different, related to the markup for the maskable icon. Would you mind filing a different issue?
comment
created
andreban
username_2
Filed https://github.com/lovell/sharp/issues/2299 for help on what may be going wrong here
comment
created
andreban
username_2
Created #259 to discuss reverting from sharp.
comment
created
andreban
username_2
#262 returns to `jimp` instead of `sharp`, which was the cause of this issue.
comment
closed
andreban
username_2
issue
created
peterpeterparker
username_0
Sweet, thank you @username_2  👍
comment