Open Bug 1798525 Opened 3 years ago Updated 1 year ago

[Bug]: `position: sticky; bottom: 0` elements wobble when the address bar is shown/hidden

Categories

(GeckoView :: General, defect, P3)

All
Android
defect

Tracking

(Not tracked)

People

(Reporter: petru, Unassigned)

Details

Attachments

(1 file, 1 obsolete file)

From github: https://github.com/mozilla-mobile/fenix/issues/27592.

Steps to reproduce

  1. Load up the following HTML:
<!DOCTYPE html>
<html lang="en" style="min-height: 100%; display: grid; place-items: stretch">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>
  <body style="display: flex; flex-flow: column; margin: 0px;">
    <div style="height: 200vh; background: linear-gradient(blue, white)"></div>
    <button>Adding this button makes the wobble more pronounced</button>
    <div style="position: sticky; bottom: 0; margin-top: auto; background: red">Hello</div>
  </body>
</html>
  1. Do some scrolling

Expected behaviour

The red div should be firmly glued to the bottom of the viewport at all times

Actual behaviour

At the start of scrolling if the address bar is being collapsed/expanded the red div wobbles. It is more pronounced the faster you scroll.

Device name

Fairphone 4

Android version

Android 11

Firefox release type

Firefox

Firefox version

106.1.0

Device logs

No logs

Additional information

My assumption is when the address bar is collapsed/expanded it moves the html element up/down, displays that frame, then does a layout pass which recalculates the position of sticky elements. Ideally sticky elements would be repositioned before displaying the frame.

┆Issue is synchronized with this Jira Task

Change performed by the Move to Bugzilla add-on.

Severity: -- → N/A
Type: defect → task
Severity: N/A → S3
Type: task → defect
Priority: -- → P3
Attachment #9387359 - Attachment is obsolete: true
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: