Code Editors: Weird scrolling/click behavior in Additional CSS

[melchoyce]

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

[westonruter]

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

[danieltj]

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.

[westonruter]

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

[danieltj]

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.

[westonruter]

Duplicate of #41850.

Please re-open if this is not a duplicate.

[melchoyce]

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?

[westonruter]

@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.

[westonruter]

In 41384:

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

See #41850.
Fixes #41879.

[westonruter]

In 41385:

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

See #41850, #41879.

[melchoyce]

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.

[westonruter]

@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.

[melchoyce]

Ugh, sorry, my test site was cached.

[westonruter]

In 41679:

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

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