Defect #44408
closed
Autocomplete popup appears off-screen when the caret is near the bottom of the viewport
Description
The autocomplete request succeeds, but its suggestion popup is often not displayed when the browser page zoom is not 100%.
At 100% page zoom, autocomplete works normally. When browser zoom is changed, the issue occurs across multiple browsers:
- Chrome: 110% — the popup is not displayed most of the time
- Microsoft Edge: 110% — the popup is not displayed most of the time
- Firefox: 120% — the popup is not displayed most of the time
Windows display scaling is 100%.
Resizing the browser window sometimes makes the popup appear again. Opening DevTools while docked also sometimes makes it appear, presumably because it changes the page viewport. However, DevTools in a separate window does not resolve the issue.
In the Network panel, the autocomplete request is sent and receives a response even when the popup is not visible.
Redmine version: 6.1.3
Theme: Default
Plugins: Redmine Checklists plugin (Light version)
Expected result:
The autocomplete suggestions popup should be displayed reliably regardless of browser page zoom level.
Actual result:
The autocomplete suggestions popup is often not shown at non-100% browser page zoom, despite the request receiving a response.
Files
Related issues
Updated by Ling Li 21 days ago
Update:
We upgraded the vendored Tribute asset from 5.1.3 to 5.1.4. The issue seems gone in Edge, Chrome, and Firefox at different page zoom levels. Tribute 5.1.4 includes upstream menu-positioning fixes and removes the older retry logic that hid and recursively repositioned an off-screen menu.
This strongly suggests that the issue was caused by Tribute 5.1.3 menu positioning at non-100% browser zoom.
Updated by Go MAEDA 21 days ago
- File 44408.patch 44408.patch added
- Target version set to Candidate for next minor release
Thank you for the detailed report. I was able to reproduce the issue.
I agree that the cause is a bug in Tribute 5.1.3, probably the one fixed by https://github.com/zurb/tribute/pull/491
However, updating to Tribute 5.1.4 introduces some behavior changes. For example, the menu is limited to 300px wide by an inline style and is closed on any window scroll or resize. The latter also causes one of our existing system tests to fail. I would rather not update Tribute in a minor release.
The attached patch instead adds position: relative to the body style. This works around the issue while keeping Tribute 5.1.3. Since #wrapper already has position: relative (#43742), only elements placed directly under body (the Tribute menu, jQuery UI dialogs, tooltips, the datepicker, and the context menu) get a new containing block. I checked that all of them are positioned the same as before.
Updated by Go MAEDA 21 days ago
- Related to Patch #33424: Update Tribute to 5.1.3 added
- Related to Defect #43742: Missing #wrapper positioning may increase reflow cost added