1996140 - onelook.com - dropdown menu has overlapping terms/definitions

Status: VERIFIED FIXED

(Web Compatibility :: Site Reports, defect, P3)

Description

[Daniel Holbert [:dholbert]]

STR:

1. Load https://onelook.com/
2. Type a long string of question marks ("????" etc) into the query box and watch for overlap.

ACTUAL RESULTS:
In the dropdown list that appears (which is really just a <ul> element styled as a flex container), the words and their definitions overlap at various points (see attached screencast)

EXPECTED RESULTS:
No such overlap.

See some analysis in bug 1987281 comment 11 (which I'm spinning this bug off from). I'll post a screencast and a reduced testcase here.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screencast of bug

Here's a screencast. This bug reproduces at most lengths after there are enough question marks for "aforementioned" to be the first result (t=10s in this screencast). It's particularly bad at t=14s and t=16s. After that, the next question-mark that I add somehow nudges the site to use a wider dropdown-width, which avoids the overlap.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot of bug (taken from screencast)

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (somewhat reduced)

Here's a somewhat reduced testcase. The <ul> element here does not have a specified width, so it should be intrinsically sized (or at least that's what the site intends/expects), which means there shouldn't be any overlap.

(In practice, the site does put a specified width on this element, but it removes that width and measures the resulting outerWidth in the JS that I quoted in bug 1987281 comment 10).

Comment 4

[Daniel Holbert [:dholbert]]

Safari 26 shows the same results as Firefox on the actual site here, and also shows the same overlap that Firefox does on testcase 1.

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (reduced)

Here's a much more reduced testcase.

The issue here is that Firefox and Safari implement an older version of the flexbox intrinsic-sizing algorithm, which doesn't take the 400px flex-basis into account; so we end up with a container size that's too small, as shown in both lines in this testcase.

(And then we do take that flex-basis into account when doing layout inside of the intrinsic size, which leads to stuff getting squished and overlapping, given the website's explicitly-specified min-width:0 and default nonzero flex-shrink on the first item, shown on the second line in this testcase.)

Comment 6

[Daniel Holbert [:dholbert]]

Hypothetically the site here could work around this problem (and get a better rendering for Firefox/Safari users, with no change for Chrome users I think) by switching this declaration:

    .ui-autocomplete .ui-menu-item .definition {
      flex: 0 0 400px;

to instead be:

    .ui-autocomplete .ui-menu-item .definition {
      flex: 0 0 auto;
      width: 400px;

That ends up meaning the same thing for the flexbox algorithm, but with width, it means the child also gets to contribute a larger size earlier in layout as well, when the flex container is being intrinsically sized (following spec text in earlier versions of the flexbox spec, just using the straightforward intrinsic width contribution of the child).

Comment 7

[Daniel Holbert [:dholbert]]

Attachment: screencast showing better rendering after the CSS change in comment 6

(here's a demo of how this looks -- much better, matching Chrome I think -- when I make the CSS change noted in comment 6.)

Comment 8

[Daniel Holbert [:dholbert]]

(we could ship comment 6 as a sitepatch if we'd like; adding the keyword in case we want to go that route)

Comment 9

[Daniel Holbert [:dholbert]]

Looks like they have a contact-us form at https://onelook.com/about.shtml -- I'll send them a note later on via that form to see if they're open to making the change in comment 6.

Comment 10

[Daniel Holbert [:dholbert]]

(I sent a message through the form there. Hoping it reaches someone! Marking contact-in-progress.)

Comment 11

[Daniel Holbert [:dholbert]]

Good news - I heard back from the site operator, and they're exploring the fix that I suggested.

Comment 12

[Daniel Holbert [:dholbert]]

Looks like they deployed the suggested change, and it fixes the issue.

The page uses this stylesheet:
https://onelook.com/ol2.css?v=26 now shows

...which now has this CSS, which avoids the issue per comment 6:

/* Definition on the right */
.ui-autocomplete .ui-menu-item .definition {
  flex: 0 0 auto;
  width: 400px;

Calling this FIXED on the site's side. (The related platform-bug remains open on fixing the flexbox compat issue.)

Comment 13

[Calin Tanase]

Verified, the issue no longer reproduces.

Tested with:

• Browser / Version: Firefox 145.0-candidate build 1
• Operating System: Windows 10