Make WordPress Core

Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#41879 closed defect (bug) (fixed)

Code Editors: Weird scrolling/click behavior in Additional CSS

Reported by: melchoyce's profile melchoyce Owned by: westonruter's profile westonruter
Milestone: 4.9 Priority: normal
Severity: normal Version: 4.9
Component: Customize Keywords:
Focuses: ui Cc:

Description

When I was testing the Additional CSS panel in trunk, I noticed that clicking into the textarea moves my whole screen down, which I found surprising and kind of alarming. Then, when I try to scroll back up to read, it snaps back up instead of naturally scrolling, which felt even more alarming. We should not make any sort of scroll/movement assumptions here.

Video: https://cloudup.com/cvJbKNaZ6yg

Change History (15)

#1 @westonruter
8 years ago

@melchoyce I think this is a duplicate of what I opened here: #41850.

#2 @adnan.limdi
8 years ago

  • Keywords has-patch added

#3 @johnpgreen
8 years ago

  • Keywords has-patch removed

#4 @danieltj
8 years ago

  • Keywords close added

As @westonruter has said, this is definitely a duplicate of #41850.

It's a different section in the customizer but the same component under the hood. A fix for that ticket would fix this too.

#5 follow-up: @westonruter
8 years ago

  • Milestone changed from Awaiting Review to 4.9

Please close as duplicate if it is a duplicate. Otherwise, we'll milestone it.

#6 in reply to: ↑ 5 @danieltj
8 years ago

Replying to westonruter:

Please close as duplicate if it is a duplicate. Otherwise, we'll milestone it.

I don't have the permissions to close this, will need someone with the right caps to do this.

#7 @westonruter
8 years ago

  • Milestone 4.9 deleted
  • Resolution set to duplicate
  • Status changed from new to closed

Duplicate of #41850.

Please re-open if this is not a duplicate.

#8 @melchoyce
8 years ago

I think it the scrolling up part is a duplicate. @westonruter, is the part where clicking into the text field pulls that up intentional, or is that also a part of the bug?

#9 @westonruter
8 years ago

  • Keywords close removed
  • Milestone set to 4.9
  • Resolution duplicate deleted
  • Status changed from closed to reopened

@melchoyce oh yeah, I can see that the scrolling-on-focus is due to this bit of code: https://github.com/WordPress/wordpress-develop/blob/ab24be4c873e0a0fa8021310cbd4d20f0a2ba15c/src/wp-admin/js/code-editor.js#L183-L189

It seems the problem is that it is trying to scroll the _entire_ editor into view, rather than just the line that is being focused.

#10 @westonruter
8 years ago

  • Owner set to westonruter
  • Resolution set to fixed
  • Status changed from reopened to closed

In 41384:

Code Editor: Scroll the cursor line into view instead of the entire editor when focused.

See #41850.
Fixes #41879.

#11 @westonruter
8 years ago

In 41385:

Code Editor: Remove scrollIntoView of editor's cursor line upon focus to prevent jumping issues for editor scroll position.

See #41850, #41879.

#12 @melchoyce
8 years ago

Can we remove scrollIntoView entirely, or experiment with actually scrolling the screen up versus jumping it up? Still feels kind of alarming to suddenly change positions on the screen.

#13 @westonruter
8 years ago

@melchoyce the scrolling into view was removed entirely in [41385]. The remaining issue now is with #41850 where by the header gets sticky (position:fixed) but isn't taking into account the size of the expanded help section.

#14 @melchoyce
8 years ago

Ugh, sorry, my test site was cached.

#15 @westonruter
8 years ago

In 41679:

Customize: Fix jumping behavior upon scrolling up when a sticky header has its description expanded.

Props delawski.
See #34343, #41879.
Fixes #41850.

Note: See TracTickets for help on using tickets.