LadybirdBrowser
duckduckgo.com: Images appear incorrectly/distorted
Summary
On duckduckgo.com, the showcase images do not appear in their intended size and/or position.
Operating system
Linux
Steps to reproduce
- Go to duckduckgo.com
- Scroll down
Expected behavior
The images should appear at the right size and position.
Actual behavior
The images appear too big, distorted and at the wrong position. In the REDUCTION.html, the opacity is also seemingly wrong. This appears to be at an extreme level at higher window widths, it looks better on smaller widths.
URL for a reduced test case
https://codepen.io/504timeout/pen/azbVOzm
HTML/SVG/etc. source for a reduced test case
N/A
Log output and (if possible) backtrace
N/A
Screenshots or screen recordings
https://github.com/user-attachments/assets/1cba7c80-bef7-4ffc-b327-570dc345bf6d
I sadly wasn't able to reduce the File a lot, but the Pictures can be found at the following lines:
3054, 3059, 3072. They themselves are picture elements with the class themedImage_wrapper__Q1Y7W.
The parent divs also share the following classes: animatedImage_image__S5Z2c animatedImage_fadeInUp__h_MoN
Build flags or config settings
No response
Contribute a patch?
- [ ] I’ll contribute a patch for this myself.
All images except one look good on master now. Here's a further reduction of a squished one:
<!DOCTYPE html>
<style>
div {
display: flex;
align-items: center;
height: 500px;
}
</style>
<div>
<img src="https://files.catbox.moe/6aaeso.png" />
</div>
As a url:
data:text/html,'%3C!DOCTYPE%20html%3E%0A%3Cstyle%3E%0A%20%20div%20%7B%0A%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20height%3A%20500px%3B%0A%20%20%7D%0A%3C%2Fstyle%3E%0A%3Cdiv%3E%0A%20%20%3Cimg%20src%3D%22https%3A%2F%2Ffiles.catbox.moe%2F6aaeso.png%22%20%2F%3E%0A%3C%2Fdiv%3E'
