Aspect ratio hack involving an inline SVG, padding-top in %, and relative positioning makes the element huge
In my fediverse server project, Smithereen, I use this hack to make containers for media attachments that are resizable but keep their aspect ratio when resized. I don't really remember why I made it exactly like this, it was several years ago, and it could probably be simplified, but either way, other browsers do render this correctly, while Ladybird doesn't π
I made a minimal page that reproduces this behavior:
<!DOCTYPE html>
<html>
<head>
<title>A very cursed aspect ratio hack</title>
<style>
*{
box-sizing: border-box;
overflow-wrap: break-word;
min-width: 0;
}
body{
width: 100%;
font-family: Tahoma, Helvetica, Arial, Roboto, sans-serif;
font-size: 11px;
}
.aspectWrapper{
position: relative;
white-space: nowrap;
font-size: 0;
}
.pseudoImage{
width: auto;
height: auto;
max-width: 500px;
max-height: 500px;
vertical-align: bottom;
}
.positioner{
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.safariSucks{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.aspectBox{
white-space: normal;
font-size: 11px;
overflow: hidden;
display: grid;
grid-gap: 2px;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<span class="aspectWrapper">
<svg class="pseudoImage" width="1000" height="500"></svg>
<div class="positioner">
<div style="padding-top: 50%">
<div class="safariSucks">
<div class="aspectBox" style="background: #000; color: #fff; text-align: center; padding-top: 100px;">
This element should be 500x250
</div>
</div>
</div>
</div>
</span>
</body>
</html>Vivaldi vs Firefox vs Ladybird:
LadybirdBrowserΒ /Β ladybird
Truly independent web browser
21.3k
Contributors get 100% of received funds after fees
How does funding with Polar work?
1
Pay now to fund the work behind this issue.
2
Get updates on progress being made.
3
Maintainer is rewarded once the issue is completed.
FAQ
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too