1971978 - jsfiddle.net - "No results found." not displayed

Status: NEW

(Core :: Layout: Positioned, defect)

Description

[railioaie]

Environment:
Operating system: Mac OS X 10.15
Firefox version: Firefox 139.0

Preconditions:
Clean profile

Steps to reproduce:

1. Navigate to: https://jsfiddle.net/c1pwfnj4/12/
2. Observe

Expected Behavior:
"No results found " text is displayed

Actual Behavior:
"No results found " text is not displayed

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in firefox-nightly, and firefox-release
• Does not reproduce in chrome

Created from https://github.com/webcompat/web-bugs/issues/160005

Comment 1

[railioaie]

Attachment: 00.PNG

Comment 2

[gbs]

Original reporter here. A few extra notes:

This is cut down from (a non-public part of) my employer's website. We've deployed a workaround, so it's no longer a major issue for us. Safari's behavior matches that of Firefox - Chrome seems to be the outlier here.

Here's the relevant code:

<style>
.label {
  position: relative;
}

.dropdown {
  position: absolute;
  overflow-y: scroll;
  width: 100%;
}
</style>

<label class="label">
  <div>
    <input />
  </div>
  <div class="dropdown">No results found.</div>
</label>

The issue arises because .dropdown has a calculated width of zero in Safari and Firefox, but the full width of the page (or container) in Chrome. Adding display: block to the label, removing the div around the input, or removing either of the position properties results in the correct rendering in all three browsers. Removing the overflow-y or width properties from .dropdown cause the text to appear, but wrapped onto one word per line, as if it had a very narrow width.

Comment 3

[Dennis Schubert [:denschub]]

This is technically a testcase, not a webcompat bug. Let's move this to the layout folks for triage.

Comment 4

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: Testcase #1: Reporter's testcase

Thanks for the bug report! I can reproduce this bug.

Comment 5

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

This looks like a long-standing position:absolute bug in Firefox.