CSS Position:Fixed on Select Option (Acts like Position:Absolute)
Categories
(Core :: Layout: Form Controls, defect, P3)
Tracking
()
People
(Reporter: jamys, Unassigned)
References
(Regression)
Details
(Keywords: regression)
Attachments
(1 file)
|
357 bytes,
text/html
|
Details |
Steps to reproduce:
Hi. The HTML code below demonstrates this behavior...
<html>
<head>
<title></title>
<style>
option:hover:after {
color: white;
background: black;
content: attr(title);
position: fixed;
top: initial;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
</style>
</head>
<body>
<select size="2">
<option title="Info for 1">1</option>
<option title="Info for 2">2</option>
</select>
</body>
</html>
Actual results:
On hover, the CSS tooltip acts like CSS Position:Absolute and hovers over the bottom of the element.
Expected results:
On hover, the CSS tooltip should act like CSS Position:Fixed and hover over the bottom of the page.
In at least the last 50 versions of Firefox (and other browsers), CSS Position:Fixed was "fixed" to the window, not the element. While some CSS properties (such as Filter on a parent) could change this position behavior, as can be seen from the code above, none are used here.
The last version of Firefox that respected Position:Fixed in this case appears to be Firefox 100.0.0.
Some change since 100.0.0b1 seemed to impact Position:Fixed for this element. Don't know if any other HTML elements may be affected.
I haven't tested the lastest Firefox builds on different operating systems. I noticed this "new" behavior on the latest Linux versions of Firefox. Though it may apply to other OS versions of Firefox.
Thanks.
Comment 1•3 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout: Form Controls' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
Comment 2•3 years ago
|
||
Comment 3•3 years ago
|
||
This is a regression / intentional change from bug 1741776, see there for why. The tldr is that <option>s are rather special, and it turns out that even though Chromium allows you to make pseudo-elements abspos, it doesn't allow you to make absposes anything else.
Updated•3 years ago
|
Updated•3 years ago
|
Description
•