Make WordPress Core

Opened 8 years ago

Last modified 5 years ago

#38850 accepted enhancement

Sticky positioning for a smoother scrolling experience

Reported by: iseulde's profile iseulde Owned by: iseulde's profile 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 8 years ago.
38850.2.patch (3.2 KB) - added by iseuldebot 8 years ago.
38850.3.patch (3.9 KB) - added by iseuldebot 8 years ago.

Download all attachments as: .zip

Change History (10)

@iseuldebot
8 years ago

#1 @iseulde
8 years ago

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

Proof of concept with the top toolbars above.

@iseuldebot
8 years ago

#2 @iseulde
8 years ago

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

@iseuldebot
8 years ago

#3 @iseulde
8 years 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.


8 years ago

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


8 years ago

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


7 years ago

#7 @obenland
7 years ago

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