demo · v131
Proportional Badge Position
Chrome 131 lets anchor-size() appear inside inset properties (top, right, bottom, left), not just sizing ones. That means a notification badge can pin itself at a fraction of its button's size — so it rescales perfectly as the button grows or shrinks.
12
Notifs
3
Messages
99
Likes
7
Comments
1
Bookmarks
Click a badge to decrement its count. Badge hides when count reaches 0.
comparison: resize reveals the difference
Both badges show the same icon button. Change the size using the controls above and watch what happens to each badge's corner alignment.
✓ anchor-size() in inset (Chrome 131)
🔔
5
Badge corner stays proportional at every size
top: calc(anchor-size(height) * -0.28);
right: calc(anchor-size(width) * -0.28);✗ Old approach (hardcoded -8px)
🔔
5
Badge drifts off-corner at Small and Large
top: -8px;
right: -8px;the code
The critical lines use anchor-size() inside top and right — inset properties that couldn't accept it before Chrome 131.
/* Each icon button is its own anchor scope */
.btn-wrap {
display: inline-block;
position: relative;
anchor-scope: --btn-anchor; /* scope so sibling's anchors don't collide */
}
.icon-btn {
anchor-name: --btn-anchor;
width: var(--btn-size);
height: var(--btn-size);
}
.badge {
position: absolute;
position-anchor: --btn-anchor;
/* ✨ NEW in Chrome 131: anchor-size() in inset properties */
top: calc(anchor-size(height) * -0.28);
right: calc(anchor-size(width) * -0.28);
/* The badge overlaps the corner by 28% of the button's dimensions.
Resize the button — the badge stays perfectly pinned. */
}