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
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

Demo: https://tdresser.github.io/sync-scroll-offset-test
Now in Edge, elements jitter when scroll (JavaScript scroll-linked effects)

change element’s style in onscroll callback

  • heavy jitter - scroll mouse wheel
  • no jitter - press and drag middle mouse wheel
  • a little jitter - drag the scroll bar

change element’s style in requestAnimationFrame callback

  • heavy jitter - scroll mouse wheel
  • a little jitter - press and drag middle mouse wheel
  • a little jitter - drag the scroll bar

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

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

Sign in