Image with transparency rendered grottily #3691
Comments
|
We propagate the decoded image's alpha premultiplication type all the way to the rendering library, and I fixed this specifically for PNG images a while ago. This might have regressed; I'll take a look. |
AtkinsSJ
added
bug
|
This seems to happen when the image is not displayed in its original size; i.e. zooming in triggers the bug. When I change our Skia blending mode to nearest neighbour, the issue disappears:
Both the original bitmap and the Skia bitmap have the right alpha type set. |
|
@gmta Good catch. Here's an additional data point for that. Removing the size attribute from the tag makes the image render correctly on a low-DPI screen:
When I move the window to my Mac's retina screen and refresh, I get grot (understandable, given that we're now rendering at a pixel multiplier).
|
|
Since swapping out the Skia sampler prevents the issue, this might be a bug on their side. Seems like it used to be the case they only supported premultiplied blending, while support for blending unpremultiplied color data is relatively recent. |
Although the PNG format inherently works with unpremultiplied color data, we are seeing issues with Skia trying to blend unpremultiplied colors and producing the typical erroneous darker color bands. Our LibWeb tests actually had a couple of screenshot tests that exposed these graphical glitches; see the big smiley faces in the CSS backgrounds tests for example. The failing tests are now updated to accommodate PNGLoader's new behavior. Chromium seems to apply the same behavior; i.e. it actively decodes PNGs to a premultiplied bitmap instead, citing the same shortcoming in Skia. Fixes LadybirdBrowser#3691.
Although the PNG format inherently works with unpremultiplied color data, we are seeing issues with Skia trying to blend unpremultiplied colors and producing the typical erroneous darker color bands. Our LibWeb tests actually had a couple of screenshot tests that exposed these graphical glitches; see the big smiley faces in the CSS backgrounds tests for example. The failing tests are now updated to accommodate PNGLoader's new behavior. Chromium seems to apply the same behavior; i.e. it actively decodes PNGs to a premultiplied bitmap instead, citing the same shortcoming in Skia. Fixes LadybirdBrowser#3691.
Although the PNG format inherently works with unpremultiplied color data, we are seeing issues with Skia trying to blend unpremultiplied colors and producing the typical erroneous darker color bands. Our LibWeb tests actually had a couple of screenshot tests that exposed these graphical glitches; see the big smiley faces in the CSS backgrounds tests for example. The failing tests are now updated to accommodate PNGLoader's new behavior. Chromium seems to apply the same behavior; i.e. it actively decodes PNGs to a premultiplied bitmap instead, citing the same shortcoming in Skia. Fixes LadybirdBrowser#3691.
Summary
When I visited my company's (@valohai) pricing page in Ladybird, I noticed some of our images are rendered grottily compared to Chrome. (We're changing those images to SVG, since they were blurry as well as grotty...)
I suspect this has to do with semi-transparent pixels, and possibly non-premultiplied blending.
Operating system
macOS
Steps to reproduce
Expected behavior
Less grotty edges. Please see screenshot below.
Actual behavior
See above for screenshot.
URL for a reduced test case
N/A
HTML/SVG/etc. source for a reduced test case
Log output and (if possible) backtrace
No related log output for this page.Screenshots or screen recordings
Same reproducer rendered using Ladybird, Firefox, Chrome.
Build flags or config settings
No response
Contribute a patch?
The text was updated successfully, but these errors were encountered: