PBGUX/pb-design-system

Scroll issue on some pages

James-Crisp-UX opened this issue · 6 comments

When the browser height is set to taller than the content but smaller than the content when the header bar has been collapsed scrolling causes a very bad flickering issue. Please see the attached zip file for a demo.

The issue affects some pages with the class "doc-hero headroom headroom"

Scroll-issue.webm.zip

Have you seen this on other pages? I assume, also you are using Firefox?

I'm using Chrome (v57) on a Mac (OS 10.12)

I've also noticed it on:
resources/downloads
web/elements/badges
desktop/patterns/ribbons

Basically it's on any page that has a small amount of content which on larger monitors wouldn't need scrolling. If you shrink the window down so it only just adds the scrollbar and then try to scroll it starts to flicker. I assume that this is because when the doc-hero element collapses down it makes the window smaller than the browser which means that it doesn't need to scroll. This then causes the doc hero to expand again restoring the scrollbars and repeating the process.

I cannot reproduce it on Safari 10.1 nor Chrome 60. Since people are not likely to reduce the window to such a small vertical size, we'll have to treat it like a rare edge case. Thanks.

I have reproduced it in Chrome, Safari and Firefox. It doesn't happen at a really small size. It happens on the downloads page with an (internal) browser height between 1080px and 1294px so quite a wide range. I'm happy to have a skype chat if you want to see it happening on my screen.

Hi,

I've also managed to reproduce this in Firefox with a large screen (see the screenshot size attached).

Kind regards,
Paul Hutson

image

It seems to affect pages that do not have a left nav. We will look at it, thanks. At least it only will affec the DS site, not the DS code that end-users use.