[Webkit-unassigned] [Bug 202970] New: Fixed transitioning elements jump down when overscrolling

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Mon Oct 14 21:28:52 PDT 2019


https://bugs.webkit.org/show_bug.cgi?id=202970

            Bug ID: 202970
           Summary: Fixed transitioning elements jump down when
                    overscrolling
           Product: WebKit
           Version: Safari 13
          Hardware: iPhone / iPad
                OS: iOS 13
            Status: NEW
          Severity: Minor
          Priority: P2
         Component: Scrolling
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: Alexd120987 at gmail.com

Created attachment 380961

  --> https://bugs.webkit.org/attachment.cgi?id=380961&action=review

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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20191015/f2b8435f/attachment-0001.html>


More information about the webkit-unassigned mailing list