hidden scrollbars appear/disappear when selecting some regions

[carmacleod]

In our web app, we don't show scrollbars unless they are needed (they often aren't).
When using the landmarks dropdown to navigate through the regions of some of our pages, hidden scrollbars are shown, causing the UI to shrink to accommodate the scrollbar, and then, because scrolling was not actually necessary, the scrollbar hides again and the UI expands to fit the available space. This makes navigating through some regions look "jerky".

I don't know if this is potentially an easy fix (i.e. you are forcing hidden scrollbars to show), or a really hard one (i.e. all you are doing is scrolling, and the browser is forcing hidden scrollbars to appear).

If you want to actually try this, the app is http://orion.eclipse.org
You would need to create an account (sorry, but note that we do not send any junk email - only whatever is needed to confirm your account). The app is an online IDE. It is not completely accessible yet, but we're working on it. :) You can navigate to the various pages using the sidebar on the left.

I don't know if it's necessary, but you may want to add some content (maybe create a new project, and put some simple html files in it or something) so that there's something to look at. :)
In case it's helpful, Alt+Shift+? (Ctrl+Shift+? on Mac) shows the list of available keystrokes, and Ctrl+Space in the editor is "autocomplete" to help with typing.

In case it's useful, here's the Orion Editor page doc.
Note that the doc on git pages is sadly out of date, because we previously had multiple git pages, but they were all merged into one Git page (with some complicated drop-downs and toolbars for performing git operations ;).

[matatk]

I'm not (consciously) forcing scrollbars to appear. The only thing I can think of is if scrollIntoView() (which is used to ensure the top of the region is shown when moving between them) is causing this. I'm not sure it would be an easy fix, but will try it out on your site as soon as I'm able.

Did you notice this before 2.3.0? If need be I can send you prior versions of the extension to track down (or I could try them myself locally, though it may be several days before I can do that).

[carmacleod]

I didn't notice it before, but maybe I just wasn't paying attention... ;)

[matatk]

I'm not able to access the site... I can't log in as I'm not registered, and http://orion.eclipse.org immediately redirects me to a login page that doesn't allow me to register. (I did actually try reloading and activating the "Register" link on the home page before it disappears, and it appears to work, but the registration page also redirects to the login page too.)

If you need to send me any private login details, we're following eachother on Twitter, so feel free to DM me there.

[carmacleod]

Oh - sorry! It does that for me, too, but I was registered long ago, so it just logs me on.
I think external folks are supposed to use https://orionhub.org/ - can you try that instead?
Same thing, different server.
If that fails, then we'll go the DM on Twitter route - thanks for suggesting it!

[matatk]

I was able to register and have a quick look earlier this morning, thanks. I got to test my fix for #166, which is now working well, but haven't hide time to add any content, which appears to be necessary, as you mentioned, for triggering the scrollbars issue (it's not happened yet).

[carmacleod]

The fastest way to add content is to bring it in from github.

Here’s what you could do, if you like:

• Click on the Settings gear in the left Sidebar nav to go to the settings page, and then select User Profile. Click the GitHub Octocat icon next to Add linked account: to authorize your github account.
• While you’re on the settings page, click on the GIT category and type in your Email address and Name for git commits. You may want to also select Enable storage.
• Now click on the Git logo in the left Sidebar nav to go to the git page, then click on the Repository: drop down, and the Clone Repository button. Paste in your repository URL. After the repo clones, it should become the selected repository. (If not, then go to the Repository: drop down again to select it).
• Now you should be able to click on the Pencil icon in the left Sidebar nav to go to the editor page, where you can browse through your code.

Here's a screen snap of the scrollbar appearing when the Sidebar nav landmark is selected on the editor page.

[matatk]

Thanks for the info; I've been able to try it.

Good news: it's not related to the use of .scrollIntoView() which improves the UX a lot (as per #147). It's being caused by the border being drawn slightly bigger than the elements on the page—when they're already full-height/width, that makes the page get bigger.

The fix should be fairly simple: make the borders appear only inside the landmark regions, and it's probably also a good idea to definitively set a box-sizing mode, so that the page can't override it.

I intend to get this fixed fairly soon and release 2.3.1, as there are some other nice fixes, tidy-ups and polish in there too.

[carmacleod]

Awesome! Thanks! Looking forward to 2.3.1!

[matatk]

Right, I have good news and some, other, news :-).

Landmarks now draws its borders and labels within the bounds of the landmark regions themselves (previously it used a CSS border and outline, which was partly for historical reasons from before the borders were elements themselves and partly as I thought it might help make the border more noticable). Anyway, this solves the problem of scrollbars appearing when landmarks that take up the entire viewport (vertically, horizontally or both) are focused. In Orion, this means that focusing the navigation region (and some others) no longer causes those scrollbars to appear.

But for regions in Orion such as the footer, which appears to be offset slightly compared to how it looks visually, and for the accordion regions (on the page where one can expand the README and other bits), those regions go off the end of the visible page, so they still cause scrollbars to appear.

I'm releasing 2.3.1 because I think it'll immediately benefit everyone, and I think you'll find it a noticeable improvement. I have a feeling that I've gone as far as possible for this issue with a general solution, but I would be happy to explore this further with you if you like—though just to let you know, because of the way I set things up, this issue will be automatically closed shortly (slightly oops). It may be that we can find something simple you can do to the site to alleviate the problem, if there's not a general logic solution on Landmarks' part.

By the way, Orion looks cool :-) and it's very encouraging to see accessibility being taking into consideration as part of building it.

[carmacleod]

Thanks! I really like what you did with the labels on skinny regions, and thank-you for fixing the scrolling!

I adjusted the CSS on our footer, so that's working now (on http://orion.eclipse.org ... the fix probably won't be on https://orionhub.org/ for another 6 weeks or so, fyi...).

I think the vertical scrolling on the accordion regions is fine. There may be something funny in there still - and I'm pretty sure the problem is on our side - but I am afraid to touch it at the moment. Maybe someday. ;)

Thanks again!

[matatk]

Cool, and you're welcome; that's great news all round :-).