visuallyHiddenStyle should include initial position to avoid visual bug

[MirrorBytes]

Describe the bug A clear and concise description of what the bug is.

visuallyHiddenStyle in a11y.js should include an initial position of bottom: 0. Without it, it renders under (or sometimes besides) elements in the Router causing scrollbars to appear.

To Reproduce Steps to reproduce the behavior:

1. Wrap a div with style of height:100vh with Router.
2. See scrollbar

Please add a link to an example in the Svelte REPL or in a Codesandbox, if you can.

https://svelte.dev/repl/b4d98fdee025474291747a40a4ed32a7?version=3.31.2

Expected behavior A clear and concise description of what you expected to happen.

No scrollbar or abnormal sizing issues.

[mefechoel]

Thanks for the detailed description and the suggested fix! I'll release a patch in the next days.

[mefechoel]

So, I've tried you're example and noticed, that the scrolling was not happening because of the status area, but because of a padding on the body element. That's what browsers do by default...

Please try and add this to your App component and see if it fixes the issue:

<style>
  :global(body, html) {
    padding: 0;
    margin: 0;
  }
</style>

CSS resets also often take care of this, so you could try one of those if you prefer.

[MirrorBytes]

I'm use tailwind with resets. This still occurs due to the status bar being a 1x1 element at the bottom or side of the screen.

On Fri, Jan 15, 2021, 12:41 PM mefechoel notifications@github.com wrote:

So, I've tried you're example and noticed, that the scrolling was not happening because of the status area, but because of a padding on the body element. That's what browsers do by default...

Please try and add this to your App component and see if it fixes the issue:

CSS resets also often take care of this, so you could try one of those if you prefer.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mefechoel/svelte-navigator/issues/28#issuecomment-761082648, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFIYILIBYMO4UX3OFKQ4LSLS2B457ANCNFSM4WDMOYZA .

[mefechoel]

Alright, good to know. I'll look into it further.

[MirrorBytes]

I have a feeling it's a bit of both here. In a vanilla environment it's the padding, but in a reset environment it's the status bar. I'll float with both for now and update this if I can find if there's something else going on.

Edit: well I found the culprit... I had a wrapper element like 6 layers deep with a hidden border. Still weird how the bottom: 0 fixed that though.

[mefechoel]

This should be fixed with 3.1.5. Please try if it works for you now.

[mefechoel]

Oh ok, missed the edit. It's probably still a good idea to move the status div off screen and out of the scrolling flow.