Bug 206227 – Fixed elements no longer stay fixed with elastic overscroll (rubberbanding)

• Status: ASSIGNED
• Component: Scrolling

Created attachment 387647 [details]
Demonstration of the minimal example

Minimal Example:

```html
<style>
  body {
    height: 2000px;
    margin: 0;
  }

  #fixed {
    position: fixed;
    top: 0;
    background: black;
    width: 100%;
    height: 100px;
  }
</style>

<div id="fixed"></div>
```

In earlier versions of macOS Safari (and current iOS Safari), the fixed header would stay fixed **including** the elastic overscroll. Now, it's not fixed when overscroll is in progress (like Chrome - which seems incorrect).

The problem here is that positioning libraries using `position: fixed` include window scroll to position elements, and Safari reports the overscroll included in the window.pageYOffset value, but since it's no longer fixed with it, the position is wrong when elastic scroll is in progress.

[Radar WebKit Bug Importer]

<rdar://problem/58707084>

[Simon Fraser (smfr)]

I think we broke this in the big scrolling tree rewrite.

[Simon Fraser (smfr)]

Created attachment 388505 [details]
Patch

[Simon Fraser (smfr)]

Created attachment 388508 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 388508 [details]
Patch

Rejecting attachment 388508 [details] from commit-queue.

Failed to run "['/Volumes/Data/EWS/WebKit/Tools/Scripts/webkit-patch', '--status-host=webkit-queues.webkit.org', '--bot-id=webkit-cq-02', 'validate-changelog', '--check-oops', '--non-interactive', 388508, '--port=mac']" exit_code: 1 cwd: /Volumes/Data/EWS/WebKit

ChangeLog entry in LayoutTests/ChangeLog is not at the top of the file.

Full output: https://webkit-queues.webkit.org/results/13310483

[Simon Fraser (smfr)]

https://trac.webkit.org/r255037

[Simon Fraser (smfr)]

This was partially reverted in r256400.

[Hiroyuki Ikezoe]

I raised a spec issue (it's more or less a question though) about this behavior. https://github.com/w3c/csswg-drafts/issues/6299

[Bramus]

Just a heads up that Chrome M105 will include this changed behavior (See https://chromestatus.com/feature/5381155556687872). Firefox already includes it as of Firefox 89.

[Bramus]

Testing again in MobileSafari and Safari I noticed that MobileSafari does the right thing and doesn’t move the FixedPos elements upon bounce. I don’t think this was always the case, so happy to see MobileSafari follow the spec here.

Safari on Desktop (TP 160) however does still bounce the FixedPos elements, making it the outlier when comparing behaviors across all major browsers.

Spec: https://drafts.csswg.org/css-overscroll-1/#overscroll-positioned

[yisibl]

Any news?