I've recently noticed a bug in both my own site, and in other major sites (most notably the Gatsby documentation page). I suspect it's a result of a browser change, but really I have no idea; it might just be a side effect of using something new like Flexbox or CSS Grid.
The bug is simple: the Home key, End key, and UP/DOWN keys don't scroll. The page has scrollbars, and has more content to see ... and you can 100% scroll with a mousewheel or by clicking on the scrollbars and dragging ... but somehow something in the CSS prevents key-based scrolling from working.
You can see the bug here: https://www.gatsbyjs.com/docs/api-reference/. Simply start at the top of the page, and try to use your keyboard to scroll down (even after "clicking into" the right-side part of the page). You can't ... but mouse-based scrolling does continue to work.
My question is not "please debug my problem for me", but rather ... how is this even possible? What CSS styles even have the ability to impact key-based scrolling, separate from mouse-based scrolling?
(And for the record, no, I do not have any Javascript-based onScroll handlers or anything messing things up on my site, and I believe neither does Gatsby's site. Even if you use the developer tools to remove all event listeners, keyboard scrolling remains broken.)
Apparently the answer is "a miscalculated max-height can disable keyboard-based scrolling (but not mouse-based)".
Gatsby's site had the following CSS:
max-height: calc(100vh - 0px - 124px);
(well, it actually had several different ones inside various media queries, but that wasn't relevant).
Evidently the browser didn't like how that calculation resulted, and caused this bug(?). Switching it to a simpler:
max-height: 100%;
corrected the issue.
Obviously this was a very specific case, but if you're having keyboard scroll issues (and not mouse scroll issues), and you're sure Javascript event listeners aren't to blame, it seems max-height (or possibly similar properties like height or max-width) would be the next thing to look at.
Related
I looked at the new CSS property content-visibility available on Google Chrome 85, and added it to my stylesheets to improve the rendering performance on my site:
.my-page-section {
content-visibility: auto;
}
The problem is with the scrollbar. When I drag the scrollbar from top to the bottom, it kind of "lags": the cursor reaches the bottom of the screen, but the scrollbar still is not at the bottom of the page. To get to the bottom of the page, I need to release the mouse, move it up, and drag the scrollbar down several times.
Reading the article linked above, I saw the contain-intrinsic-size CSS property. Adding it with a reasonable value reduces the problem with the scrollbar, but it still happens. I think it is because my app generates dynamic content and no HTML div with the class "my-page-section" will have the same size:
.my-page-section {
content-visibility: auto;
contain-intrinsic-size: 250px;
}
My question is: how can I improve my page rendering performance with the content-visibility property, without getting in the way of our users that prefer to drag the scrollbar over using the mouse wheel?
You should mock up candidates for a design solution. A consequence of dynamic height is a variable scroll height.
Re-design pages to group content categories in columns with tiles of
a fixed size.
Parse content after page load to set an accurate contain-intrinsic-size. This may not save 25ms on the first paint, but for the total session it may save time.
Explore better applications for this user-level setting: apps using off-screen canvas, onion-skin type apps, scrollbar-agnostic touchscreens.
Petition the W3C and browser vendors to resolve this matter appropriately.
I searched this site and google and found no way to simply add a plain simple scrollbar to my webpage. Is there no such way? I'm rendering a web page and there is no scrollbar. Can't understand why the default behavior is faulty. Default is you want a scrollbar for overflow but no, with CSS everything has to be tricks and workarounds.
Are you probably looking for a way to always have a scrollbar present, also if the page is short enough to not have one?
Then, yes there is a way. You might wanna do:
html {
overflow-y: scroll;
}
I understand why one would do so.
It prevents jumps when navigating between pages, which have enough content to show a scrollbar and pages which do not.
I divided page into nonscrollable header and scrollable content. Both are placed as "position:fixed" and content uses "overflow:scroll". This works great, but I noticed that scroll speed changed in Firefox, now mouse wheel scrolls much slower. How can I fix this?
Scroll speed is determined by the browser. CSS and Javascript don't have any way to affect system settings.
Iam assuming that you are concerned about scrolling being not as smooth as you want it to be. There is not much you can do here. The "overflow:scroll" performance will vary across browsers and Iam pretty sure if you check your app in a mobile browser you will find a lot of variation in scrolling speed and smoothness.
The best hack you can do is enable hardware acceleration for browsers where you can encounter this issue with the following css.
-webkit-transform: translateZ(0px);
You should put this property on element which overflow:scroll set.
But this property has its side-effects. It tends to use more memory and may result in crashes.
anyone know how to re-design scrollbar slider for IE ??not just a color but perform too..
Googling will lead you to a variety of articles on this, including "10 jQuery Custom Scrollbar Plugins".
In general, a redesign requires JavaScript to control the scrolling of an overflowed container.
The best way to do it would be disabling the browser scroll bar and using a javascript solution instead. This, of course, would effect all browsers instead of just IE.
If you want to go that route, I highly recommend jScrollPane.
http://www.kelvinluck.com/projects/jscrollpane-custom-cross-browser-scrollbars/
After installing just add this to your css:
html, body {overflow: hidden;}
jScrollPAne is great because you can style it easily with CSS or custom images. You can also easily adjust the scrolling speed and other behaviors.
While the extensions mentioned here are useful most of the time , I find that they are not on parity with native scrollbars.
For example a container with dynamic content or on resize will not trigger scrollbar resize which I find is huge limitation.(HTML5 Mutation Observers will probably make this easier in the future.)
For now I prefer scrollbar styling ,which has all the native functionality.
The downside is that is supported only by Webkit - Chrome and Safari browsers.
Still I consider that is a good trade-of... lately I notice Google is using the same technique for their apps (Gmail, G+, Reader, etc.)
From the Google Results page, the examples I saw were working only in IE and one case in Opera.
Is there any way this can be done consistently across all browsers?
Also, is there a difference between the main scrollbar of the browser (which appears across the whole page) and the scrollbar in a text area withing the page? Can I manipulate only the latter if not the former?
You can create your own scrollbars within a page using a combination of CSS and JavaScript. See https://stackoverflow.com/questions/780674/scroll-bar-with-images.
However, rendering of the scrollbar outside the page is up to the browser.
WebKit recently added the ability to style the default scrollbars, but this still only applies within the page.
EDIT: It seems that MooScroll has managed to 'replace' the browser's main scrollbar by telling it there's nothing to scroll and then creating their own scrollbar at the right-most side of the window. Clever!
Steve
Steve had a good answer, but allow me to continue.
In IE 5.5-7 (but I think they're getting rid of it in 8), you could style the scrollbars with some proprietary MS CSS properties. I wouldn't recommend this.
Steve mentions that the scroll bar outside of the page is up to the browser. Whilst this is true, you could fake it by setting the body element to overflow: hidden and then placing a huge container in the HTML with height: 100%; width: 100%.
I wouldn't recommend you touch the user's scroll bars. They are a well known convention, and they are quickly recognisable by the end user. They know how to use the default OS styled scroll bars, not your quick attempt at cross browser CSS/JS implementation. I think it was Steve Krug that said 'Don't make me think!'
Have you ever seen Flash sites that rolled their own scroll bars? ugh!
There is no cross-browser method.
Short answer no.
The appearance of the browser is out of your control unfortunately - you're only supplying the contents. It's up to the browser to decide how it wants to scroll the contents.