Open Bug 1807183 Opened 3 years ago Updated 3 years ago

CSS Position:Fixed on Select Option (Acts like Position:Absolute)

Categories

(Core :: Layout: Form Controls, defect, P3)

Firefox 108
defect

Tracking

()

UNCONFIRMED

People

(Reporter: jamys, Unassigned)

References

(Regression)

Details

(Keywords: regression)

Attachments

(1 file)

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.

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.

Component: Untriaged → Layout: Form Controls
Product: Firefox → Core

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.

Regressed by: 1741776
Severity: -- → S3
Priority: -- → P3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: