Make WordPress Core

Opened 22 months ago

Closed 22 months ago

Last modified 22 months ago

#41879 closed defect (bug) (fixed)

Code Editors: Weird scrolling/click behavior in Additional CSS

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


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
22 months ago

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

#2 @adnan.limdi
22 months ago

  • Keywords has-patch added

#3 @johnpgreen
22 months ago

  • Keywords has-patch removed

#4 @danieltj
22 months 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
22 months 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
22 months 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
22 months 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
22 months 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
22 months 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
22 months 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
22 months 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
22 months 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
22 months 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
22 months ago

Ugh, sorry, my test site was cached.

#15 @westonruter
22 months 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.