1902220 - lsvbible.com - "Select Book" menu does not get scrolled automatically when expanded by selecting "Revelation"

Status: NEW

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

Description

[Calin Tanase]

Environment:
Operating system: Linux / Windows
Firefox version: Firefox 115/127/129

Steps to reproduce:

1. Go to https://read.lsvbible.com
2. Click on "Select Book" drop down.
3. Scroll down the menu.
4. Select "Revelation".
5. Observe the behavior.

Expected Behavior:
The menu gets expanded and all the options are visible.

Actual Behavior:
The menu gets expanded but the options are not visible, scroll is needed.

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in Firefox Nightly, Firefox Release
• Does not reproduce in Chrome

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

Comment 1

[AutoWebCompat]

Attachment: Reproduction script generated by autowebcompat bot

On read.lsvbible.com, selecting "Revelation" at the bottom of the "Select Book" dropdown expands its chapter grid, but Firefox leaves the menu's scroll position unchanged so the chapter numbers stay below the visible area and the user must scroll manually. Chrome automatically scrolls the menu so the expanded chapter grid is fully visible.

Comment 2

[AutoWebCompat]

Attachment: Screenshot generated by autowebcompat bot

Comment 3

[AutoWebCompat]

Root cause analysis generated by autowebcompat bot:

The site relies on Element.prototype.scrollIntoViewIfNeeded(), a non-standard WebKit/Blink-only API that Firefox does not implement.

In the site's bundle (https://storage.googleapis.com/lsvbible/6/main.js, the module loaded via <base href='https://storage.googleapis.com/lsvbible/6/index.html'>), the click handler attached to each .book-select-button is:

c.addEventListener("click", () => {
  1 == v[b]
    ? (a.style.display = "none", W(b + "1"))
    : (c.nextSibling.style.display =
         "none" == c.nextSibling.style.display ? "grid" : "none",
       c.nextSibling.scrollIntoViewIfNeeded())
});

So for a multi-chapter book it (1) toggles the sibling .chapter-select-grid from display:none to display:grid, then (2) calls scrollIntoViewIfNeeded() on that grid to scroll the #bookAndChapterMenuPanel scroll container so the newly revealed grid is visible.

In Chrome step 2 succeeds and the panel scrolls (scrollTop 1431 → 1617), bringing the chapter numbers fully into view. In Firefox scrollIntoViewIfNeeded is undefined, so the call throws TypeError: c.nextSibling.scrollIntoViewIfNeeded is not a function. The exception propagates out of the event listener, so no scrolling ever happens (there is no fallback and no try/catch). The grid does still expand — the display assignment happens before the throwing call — but it expands below the panel's visible box, exactly matching the report: scrollTop unchanged and the user must scroll manually.

This is a genuine engine/API difference, not UA sniffing: the code path is unconditional with no browser detection. scrollIntoViewIfNeeded is not defined by any specification (it originated in WebKit and was never standardized). The standardized equivalent is Element.scrollIntoView(), defined in CSSOM View Module: https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview — in particular scrollIntoView({block: "nearest", inline: "nearest"}) is the spec'd behaviour closest to scrollIntoViewIfNeeded(). See also the scroll-an-element-into-view algorithm: https://drafts.csswg.org/cssom-view/#scroll-a-target-into-view

Evidence:

Feature detection on the live page (typeof Element.prototype.scrollIntoViewIfNeeded):

• Firefox Nightly 157.0 → "undefined"
• Chrome 152 → "function"

Source, from https://storage.googleapis.com/lsvbible/6/main.js (39 KB module referenced by <script src='main.js' type='module'> resolved against the page's <base href>): a single occurrence of scrollIntoViewIfNeeded, inside the .book-select-button click handler, called unconditionally on c.nextSibling (the .chapter-select-grid) right after flipping its style.display to grid. There is no UA check, no typeof guard, and no scrollIntoView fallback anywhere on that path.

Firefox console after performing the repro on the real site (open "Select Book", scroll #bookAndChapterMenuPanel to the bottom, click "Revelation"):
TypeError: c.nextSibling.scrollIntoViewIfNeeded is not a function (fired once per click)
Chrome console: no errors.

Live-site measurements at 1366x682, panel scrollHeight 1958 in both browsers:

• Chrome: scrollTop 1431 → 1617, grid height 186px, grid visible ratio inside panel = 1.000
• Firefox: scrollTop 1468 → 1468 (unchanged), grid height 186px, grid visible ratio = 0.005
  Note the grid does get display:grid and a non-zero 186px height in both browsers — only the scrolling is missing in Firefox, confirming the failure is at the scrollIntoViewIfNeeded call and not in the expansion.

Reduced testcase /app/diagnosis/testcase=t2u67osw.html (a 150px-tall overflow-y:auto box pre-scrolled to the bottom, with a display:none grid after the last item, and the site's exact two-statement handler), loaded via file:// in both browsers:

• Chrome: typeofMethod: "function", error: "none", scrollTop 859 → 995 (changed), panel 100% visible → VERDICT "WORKS (as Chrome)"
• Firefox: typeofMethod: "undefined", error: "TypeError: panel.scrollIntoViewIfNeeded is not a function", scrollTop 859.6 → 859.6 (unchanged), panel 1% visible → VERDICT "BROKEN (as Firefox)"
  Same divergence as the real site.

Comment 4

[AutoWebCompat]

Attachment: Reduced testcase generated by autowebcompat bot