Description
Description:
There appears to be a problem with CSS anchoring and popovers. When opening a popover attached to a button, it is correctly anchored if the page has not been scrolled. However, if you scroll the page and then open the popover, the browser does not update the anchor position, causing the popover to appear in the wrong place.
This issue only occurs when using align-self: anchor-center; for vertical centering. Without this property, the anchor position appears to update as expected (and i need to resort to transform: translatey(-50%) but this causes problems in the auto flip feature... also position-area: left center seems to break the auto flip feature.)
Steps to Reproduce:
(1. Code included below to test)
- Click the button at the top. The popover appears correctly anchored.
- Scroll the page down (so the button is no longer at the top).
- Click the button again.
🐛 Popover now appears in the wrong position.
Expected behavior:
The popover should always appear anchored to the button, regardless of the scroll position, especially when using align-self: anchor-center;.
<!DOCTYPE html>
<html>
<body>
<button popovertarget="my-tooltip">
<p>?</p>
</button>
<div id="my-tooltip" class="tooltip" popover>
<p>I am a tooltip with more information. I am a tooltip with more information. I am a tooltip with more information. I am a tooltip with more information.</p>
</div>
<style>
button {
anchor-name: --question-mark;
background: #ddd;
font-size: 1rem;
font-weight: 800;
font-family: monospace;
border-radius: 100%;
height: 50px;
width: 2rem;
line-height: 0;
border: 2px solid black;
}
#my-tooltip {
inset: auto;
position-anchor: --question-mark;
margin: 0;
position-area: right;
position-try-fallbacks: flip-inline;
align-self: anchor-center; /* <---- Only when this is present */
max-width: 300px;
border: 1px solid black;
position: absolute;
}
.tooltip {
font-family: system-ui, sans-serif;
background: #333;
color: white;
font-weight: 400;
padding: 1rem;
line-height: 1.5;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 150vh;
}
</style>
</body>
</html>Notes:
- The problem seems to occur only with align-self: anchor-center;.
- Tested in Google Chrome version 137.0.7151.104.