WordPress.org

Make WordPress Core

Opened 2 months ago

Closed 2 months ago

Last modified 7 weeks 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:

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

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

#2 @adnan.limdi
2 months ago

  • Keywords has-patch added

#3 @johnpgreen
2 months ago

  • Keywords has-patch removed

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

Ugh, sorry, my test site was cached.

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