Semi-transparent image blending problem

[0xd34d10cc]

I have a semi-transparent image and custom theme, but seems like the semi-transparent pixels still blend with white (default) color even when custom theme is active. Screenshot:

See "styling" example here: https://github.com/0xd34d10cc/iced/tree/image_edges
Is there a way to fix this?

[hecrj]

@0xd34d10cc Thanks for the report!

Here is how your image looks without its alpha channel:

iced_wgpu uses bilinear filtering for images by default which can cause artifacts when combined with transparent pixels like the ones in your image. There is a blog post—Beware of Transparent Pixels—that explains some of the details.

If we want to avoid this consistently, we should eventually store images with a premultiplied alpha. This should not be hard, but it's an operation that we should either defer to the GPU, as it consists in applying a transformation to every single pixel of the image, or run in a background worker once we introduce async support to our rendering pipeline.

In the meanwhile, you may be able to fix the issue by editing the image and extend the purple transparent pixels to completely surround the edges of the circle.