Best effort sync scroll

Issue #12057234 • Assigned to Christian F.

Details

Author
John J.
Created
May 18, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
  • Firefox
Found in build #
15.15063
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

https://docs.python.org/2/library/re.html
look the left side


Elements jitter when scroll (JavaScript scroll-linked effects)

Demo: https://tdresser.github.io/sync-scroll-offset-test
The green line (JavaScript simulate fixed) is not always overlap the red line (CSS native fixed)

Scroll synchronization on simple pages should be perfect.
Chrome already make g great work to patch it, I think Edge should do this also, for better user experience.

Attachments

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Steven K.”

    Changed Status

  • This bug has marked as duplicate. Please follow the parent issue to get new updates.

  • Changed Status

  • No, this is not duplicate
    You have many ways to position-fix a element

    1. CSS (#12011193)
    position:fixed
    
    1. JS (this issue, #12057234)
    element.onscroll= function(){
      this.style.top = scrollY + px
    }
    

    This is a async compositing problem.

  • In another word,
    MS Edge repaint page before onscroll handle execute complete.

  • Changed Title from “Element jitter when scroll (scroll-linked effects)” to “Element jitter when scroll (JavaScript scroll-linked effects)”

  • Microsoft Edge Team

    Changed Assigned To to “Steven K.”

    Changed Assigned To to “Rick J.”

    Changed Steps to Reproduce

    Changed Steps to Reproduce

    Changed Assigned To from “Rick J.” to “Christian F.”

  • I write another test case:
    https://jsfiddle.net/ha4s1xg0/2 (http://jsfiddle.net/ha4s1xg0/2/embedded/result)

    Use mouse wheel / keyboard / scroll bar to scroll.
    Demo GIF is putted in attachments

  • Changed Steps to Reproduce

    Changed Steps to Reproduce

    Changed Title from “Element jitter when scroll (JavaScript scroll-linked effects)” to “Best effort sync scroll”

    Changed Steps to Reproduce

    Changed Steps to Reproduce

    Changed Steps to Reproduce

    Changed Steps to Reproduce

    Changed Steps to Reproduce

    Changed Steps to Reproduce

    Changed Steps to Reproduce

    Changed Steps to Reproduce

You need to sign in to your Microsoft account to add a comment.

Sign in