ladybird
ladybird copied to clipboard
LadybirdBrowser
Image with transparency rendered grottily
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
- Build Ladybird on macOS from e5966eed0865667eaef3539b61b81e508eddd033
- Open attached reproducer.
- Notice grottiness around image edges.
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
<!doctype html>
<html>
<body><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAlCAYAAADFniADAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKiSURBVHgBzZhBbxJBFMf/b8CLiUkv3pqIiTExaUU+gBG/QRuKiSfg6EXLJyh8AmgvHktPHoDUj7DGD0BBjYlpIo299UJi4oXuPt/sgsK6pTtuYfeXwO4Os8w/b97Me28IhnDvcA2p23kw5aFUFoQMWD5TCEN5HsJx+iC2YP+yKFcZwQAK25F7bRHBWyKkJI9rMIHRgj2uU+7lMEz3a0Vx710G6VsNud1CVEKKWyiK+91dsc4eTC2zmBEcrlO22ISpKB50G+ITu1gaVKPNQj3wl6BG/tw5FFOXsWwILdrYqfiblb+Bv3T3ViLIHQxlHrQb/uY5S018qIFV43B11sf+iJqssh5u1qnDMsLlODddlX+nT6VrMQmCO6637bi4lppY6Tvi5pKfU65oeZbyrBQ/OmK4l97xGhSVEIHet3M8fdV0r9FEqZKOrQopO4/kIMH+Tl7JXpFHkmBHRClkkSQkHRJH5/tIEpKbpWVXuGfyTpAzn55fzF395B6uIzSSNBJ/6jAM0KvMlI9vzZKNNAw5qO7803b64wIHnQ94XXyGB+t3ERURxWcmU7hoKrQgo6kKQvJ7cXSKP7zMwWcKDvpIEswnSrzdQpIgJQHZTllyZ1SXLRX7p+WlLv1OU3b2N4gbIsnZC5VJ6sLvkQRSyq1uXFG0WbTkO15h2kqPtofAbDqcVtX4fEvGnVgJs6JclQ7qiANy6lMrAb66j7IFHdj2sUp0Cb8xX8IHV8iDdkvmOFKKHArmI3pcLPubVVBfryMvdyodZz9IEK4SpZEVWYNDS3B++T/SFfGLK/OZ68+nvh5nMLZr0vMGplO2HVnls079X6IQWRzp86gjvUF7+2GIN2CIWyfqskxXQcRP3DPPuXxM8jN95sl04gZ7ia2U2zZygd9z0upGapwTwgAAAABJRU5ErkJggg==" width="128" />
</body>
</html>
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?
- [ ] I’ll contribute a patch for this myself.
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.
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.