Describe it simply:
Using a span element with display: block and set width and height.
The width well be incorrect.
- Width will be 100%.
- When in a flexbox, width will depend on children.
When span element has no children, these issues do not exist.
Quick demo to reproduce
<!doctype html>
<html>
<head>
<script src="https://unpkg.com/@zumer/snapdom@2.24.0/dist/snapdom.js"></script>
<style>
* {
box-sizing: border-box;
}
.item {
display: flex;
}
.tag {
display: block;
width: 16px;
height: 16px;
font-size: 10px;
line-height: 16px;
color: #d95350;
border: 1px solid #d95350;
border-radius: 4px;
text-align: center;
}
#button {
display: block;
margin: 24px 0;
}
</style>
</head>
<body>
<div id="element">
<!-- case 1 -->
<span class="tag">T</span>
<!-- case 2 -->
<div class="item">
<span class="tag">T</span>
</div>
</div>
<button id="button">Capture</button>
<script>
const capture = async () => {
const img = await snapdom.toPng(document.querySelector("#element"));
document.body.appendChild(img);
};
document.querySelector("#button").addEventListener("click", capture);
</script>
</body>
</html>Anything else we should know?
snapdom: 2.24.0
Describe it simply:
Using a span element with
display: blockand set width and height.The width well be incorrect.
When span element has no children, these issues do not exist.
Quick demo to reproduce
Anything else we should know?
snapdom: 2.24.0