incorrect cell size in display: table-cell when content: ""
WHF!
Testing my personal site (link in my profile for the curious) with ladybird I noticed that a fancy separator that I did inspired on semantic-ui is not rendering correctly.
The separator is a div styled with CSS and display: table using the ::before and after ::after pseudo elements with display table-cell.
The before pseudo element gets rendered correctly, but the after one gets 0 as height and is placed under the content of the main div instead of at the right of it.
I tried to minimise the bug, here's what I came up with:
<html>
<head>
<meta charset="utf-8" />
<style>
.separator {
display: table;
width: 150px;
outline: 1px red dashed;
}
.separator::before {
outline: 1px green dashed;
background: green;
content: "";
display: table-cell;
width: 20px;
}
.separator::after {
outline: 1px blue dashed;
background: blue;
content: "";
display: table-cell;
width: 20px;
}
</style>
</head>
<body>
<div class="separator">content</div>
</body>
</html>Here's the example rendered with Ladybid:
See how the after element is placed under the "content" word and its height is 0.
and here with Chrome:
(Safari renders it correctly too).
Notice that if you set content property for the after pseudo element to some value like "1" or "after", it gets render properly.
I tried to find the bug in the code, but I failed miserably :D so I figure to fill the issue so maybe somebody else can try to fix it.
This might be related to #571 or a duped, I can't tell.
Happy to help with any more debugging or information if needed :^)
Keep up the awesome work!
How does funding with Polar work?
Pay now to fund the work behind this issue.
Get updates on progress being made.
Maintainer is rewarded once the issue is completed.
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