Bug 202970 – Transitioning elements with a fixed position jump down when overscrolling

• Status: NEW
• Component: Scrolling

[Ryan D.]

Created attachment 380961 [details]
Header jumping down when overscrolling

I have a <header> In an HTML document. The <header> has the following CSS decelerations (excluding colors):
position: fixed;
top: 0pt;
transition: 1s;
width: 100%;

The <header> has an <h1> child; it has the following CSS decelerations:
margin: 0pt;
padding: 15pt;
transition: 0.5s;

I have a function that runs when the user scrolls. The function tests to see which direction the user is scrolling. 

When the user scrolls up (going up on the page), the following style changes are made in JavaScript:
<header> height is set to 4.87em
<h1> font size is set to 32px

When the user scrolls down (going down on the page), the following style changes are made in JavaScript:
<header> height is set to 0em
<h1> font size is set to 0px


Recreating the issue:

1. You need to have an HTML Element (I was using a header) with the following CSS decelerations applied to it:
position: fixed;
transition: (any);
top: 0pt;

2. Your element needs to change in some way for it to transition. I changed the element's height when I scrolled to the top of the page with JavaScript.

3. When you load your page, you scroll down a bit, then go back up and overscroll. You must not let off of the screen when you overscroll, keep your finger on the screen, and the element should jump down to pageXOffset 0; if you move your finger up or down any, the element returns to the top of the page even if you are still overscrolling.

This issue does not happen in Safari 12. In Safari 12, the element stays at the top of the page like it is supposed to.

[Radar WebKit Bug Importer]

<rdar://problem/56298793>

[Simon Fraser (smfr)]

Do you have a live source example we can test with?

[Ryan D.]

(In reply to Simon Fraser (smfr) from comment #2)
> Do you have a live source example we can test with?

I created this in JSFiddle. Unfortunately, I’m not sure if you can scroll inside the result box on Safari 12 devices, but it works in Safari 13 on iPadOS.

Just scroll down a little, and when you scroll back up into an overscroll, keep your finger on the screen. Do this fairly quickly, it doesn’t work if you scroll very slowly.

https://jsfiddle.net/Rydev/qg19uenx/3/