1424384 - Extra whitespace added on form field selection with position: sticky

Status: UNCONFIRMED

(Core :: Layout, defect, P3)

Description

[harlan]

Instructions to Reproduce:

1. Navigate to https://www.move.mil/entitlements
2. Scroll down to the form that begins "Select your current military pay grade"
3. Select any non-blank entry in any field of the form.

Actual Behavior:

The field is selected, and a large block of whitespace appears the beginning of the page, underneath the breadcrumbs.  It will disappear after you scroll or mouse-over it.

Expected Behavior:

The entry should be selected without change to the flow of the page.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

This looks like a position: sticky bug, and seems to go back at least as far back as Firefox 27:

 0:16.04 INFO: application_buildid: 20131028030205
 0:16.04 INFO: application_changeset: 4646259ab62d
 0:16.04 INFO: application_name: Firefox
 0:16.04 INFO: application_repository: http://hg.mozilla.org/mozilla-central
 0:16.04 INFO: application_version: 27.0a1

Nice one, thanks!

Comment 2

[Jason Garber]

This issue can also be reproduced by inspecting the page referenced in the bug report using the Firefox Developer Tools.

Steps to Reproduce:

1. Navigate to https://www.move.mil/entitlements
2. Scroll the page far enough to trigger the sticky positioning of the "Back to top" link
3. Open the Firefox Developer Tools and select "Pick an element from the page"

Observed Behavior:

Attempting to highlight elements in the browser window frequently triggers reflow.

Expected Behavior:

Highlighting elements in the browser window shouldn't trigger reflow.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Maire, do you know if someone is interested or has the time to dig into what's going on here?

It's probably not a terrible bug to diagnose, but I didn't find the time to get to it.

Comment 4

[Maire Reavy [:mreavy]]

We don't have anyone at this time.