WordPress.org

Make WordPress Core

Opened 19 months ago

Last modified 13 months ago

#38850 accepted enhancement

Sticky positioning for a smoother scrolling experience

Reported by: iseulde Owned by: iseulde
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Editor Keywords: needs-patch
Focuses: javascript Cc:

Description

Let's consider using sticky positioning to do the scrolling effect we currently have on the editor page. At the moment we use JS and listen to scroll events, which is not ideal. It may look slow and buggy under some circumstances.

Browser support is looking good. It's already implemented in Firefox and Safari, and by the time we ship 4.8 it will be in Chrome (est. 31 Jan). It's under consideration for Edge and there's no support in IE. This is no big deal though, as we can just fall back to what we currently have.

http://caniuse.com/#feat=css-sticky

Note: Firefox now also gives a warning in the console about using JS for this:

This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!

Attachments (3)

38850.patch (3.4 KB) - added by iseuldebot 19 months ago.
38850.2.patch (3.2 KB) - added by iseuldebot 19 months ago.
38850.3.patch (3.9 KB) - added by iseuldebot 19 months ago.

Download all attachments as: .zip

Change History (10)

@iseuldebot
19 months ago

#1 @iseulde
19 months ago

  • Owner set to iseulde
  • Status changed from new to accepted

Proof of concept with the top toolbars above.

#2 @iseulde
19 months ago

Patch for both top and bottom editor toolbars. Let's see if we can do this for the sidebar as well.

#3 @iseulde
19 months ago

I added a buffer space of 100px between the end of the editor and the toolbar so that it doesn't stick all the way until the end.

There is one problem left with this patch though. Since there are two toolbars, they won't start hiding at the same time. We can fix this problem in JS by recalculating the editor toolbar when it changes in height, but ideally, both toolbars should be in a shared container...

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


14 months ago

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


14 months ago

This ticket was mentioned in Slack in #core by obenland. View the logs.


13 months ago

#7 @obenland
13 months ago

  • Milestone changed from 4.8 to Future Release
Note: See TracTickets for help on using tickets.