Svelte: REPL UI bug

Created on 23 May 2019  路  3Comments  路  Source: sveltejs/svelte

Hey,

Noticed this whilst using REPL, if scrollIntoView is called, the ui shifts up and you lose the control bar.

https://svelte.dev/repl/90a1baf396a342b6b73c566385a10603?version=3.4.2

Appears to happen in Chrome and Safari, you can trigger it by clicking one of the buttons under the purpley step 1

site bug

Most helpful comment

the fix:
steps.children[i-1].scrollIntoView({ behavior: 'smooth', block: 'nearest' });

proof:
https://svelte.dev/repl/fe3ffda25d954139b6dcb59101b6e94d?version=3.4.2

source:
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

All 3 comments

This can also be reproduced with JSFiddle: https://jsfiddle.net/8woxqnc2/
In Safari I cannot reproduce it with version 12.1.1 (14607.2.6.1.1)

the fix:
steps.children[i-1].scrollIntoView({ behavior: 'smooth', block: 'nearest' });

proof:
https://svelte.dev/repl/fe3ffda25d954139b6dcb59101b6e94d?version=3.4.2

source:
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

This doesn't appear to happen any more, on either Chrome or Epiphany (Safari Edge/Webkit).

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mmjmanders picture mmjmanders  路  3Comments

clitetailor picture clitetailor  路  3Comments

robnagler picture robnagler  路  3Comments

davidcallanan picture davidcallanan  路  3Comments

angelozehr picture angelozehr  路  3Comments