Stylus: When the multi-section editor `scroll-margin-top: ⩽22px` , some weird bugs will be triggered

Created on 29 Nov 2020  Â·  4Comments  Â·  Source: openstyles/stylus

Tested on Chromium84/86, Stylus version
@tophf In the multi-section editor, it seems that these problems are caused by a recent commit of master,
explore through repeated investigations...... At first I thought it was related to the editor height, further investigation finally found the reason for the recurrence of the bug:

  • Unrelated the editor height, Only related to seeing the picture below,
    I don’t know how to describe this reason , I can only borrow CSS scroll-snap-* modules to describe it,
    i.e. scroll-margin-top: ⩾ -*px ⩽ 22px , will trigger bugs,
    You can see the CSS code provided at the end, it can quickly reproduce/Debug this problem:

2011_30011045

Usually we scrolling editor for scroll-margin-top: ≋0px , but then will trigger more than 2 weird bugs, e.g. :

  • Press Ctrl-Pause , cannot toggle-Editor-Focus normally, It always goes to focus the first section-editor, can’t go back to the last active-section-editor at all.
  • Use Ctrl-F (i.e. when body.find-open) , can't jump find-Next normally, i.e. will also jump the first or second section-editor.


Gif demo: search Bugs

Stylus-Bug


  • With the help of CSS tools to Debug easier :
    Since the scrollbar is manually pulled, it will not snap automatically/accurately, so it is difficult to expose the problem, So borrow CSS to quickly/automatically/precisely reproduce this problem:
@-moz-document url-prefix("chrome-extension://clngdbkpkpeebahjckkjfobafhncgmne/edit.html"), url-prefix("chrome-extension://apmmpaebfobifelkijhaljbmpcgbjbdo/edit.html") {
/* Debug: Borrow CSS to quickly/automatically reproduce/Debug this problem */

html        {scroll-snap-type:y}
 /* when scrolling the active-editor, will automatically snap 3px */
.CodeMirror-active  {scroll-snap-align:start;scroll-margin-top:3px} 
.CodeMirror-scroll  {overscroll-behavior:contain}
}


If can't reproduce the problem, I will explain further...

Most helpful comment

Should be fixed in 26a539bd.

All 4 comments

Update: with the help of this CSS code, the specific range accurately calculated is ⩽22px

  • If no better solution, recommended to limit the calculation range to ⩽0px , In other words is as long as ⩾0px , no problem, it will can be used normally.


No any problem with scroll-margin-top: ⩾23px

html        {scroll-snap-type:y}
 /* when scrolling the active-editor, will automatically snap 3px */
.CodeMirror-active  {scroll-snap-align:start;scroll-margin-top:3px} 

@tophf Excuse me ! Don't know if you can reproduce/copy this Bugs?

You seem to be spoilt by my fast handling of issues but this is not normal. Normally it takes weeks, months, or even years. I'm working on different things now so I'll look into this later.

Should be fixed in 26a539bd.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

DanaMW picture DanaMW  Â·  3Comments

safronov3d picture safronov3d  Â·  3Comments

dnknn picture dnknn  Â·  6Comments

Gitoffthelawn picture Gitoffthelawn  Â·  4Comments

tophf picture tophf  Â·  6Comments