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.
Related
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.
I would like to prevent all forms of page scrolling in my HTML5 application. I have tried searching on SO and Google for a general answer for Prevent all scrolling mechanisms, but everything is very specific - like how to disable scrolling with touches, or with arrow keys, or the scrollbars themselves.
The reason I am looking for this is to be able to create a new div below the visible screen, and animate it up (and down. This MoonBase shows what I mean.), and I don't want the user to be able to scroll down to see it. Is this possible? Is there a meta tag I can set? Or CSS? - Or, am I taking the wrong approach to my animation? That is, would all my problems be fixed if I simply animated in from the side instead (and included the meta tag width=device-width)? Is that the closest way for me to get the desired behavior?
You don't need JavaScript, just use CSS. Set overflow: hidden;:
body {
overflow: hidden;
}
I've created a web page, and it has 7 six sections with huge background images using background-size: cover;. It works fine in all browsers except Google Chrome (All versions/All platforms). When I try scrolling the page in google chrome or click on its links (which they also scroll the page using $.scrollTo) the page gets choppy and laggy and it scrolls slowly and uses 100% CPU.
I've uploaded the page so you can test it: http://baaemail.com/beta (I'll remove the page later). Even IE9/10 is fine, but chrome gets choppy.
The page has several "scroll" events bound to it and I have tried disabling the javascript altogether but it doesn't get better so its not from the scroll events.
I'm using background-size: cover because it shapes the photo exactly like I want it to and I want the image to be fixed that's why I can't use other methods like using img tag instead of backgrounds.
What should I do?
thanks.
A solution I found for myself for a website with similar behaviour was to add background-repeat:no-repeat css property for those divs containing huge background images.
You can also check if you have a background image for body or html that is repeated, for me the big problem was a repeated pattern image that interfered considerably with google chrome's scrolling performance.
Also if you're using CSS transitions on those "slides" you should check that those are not assigned to "all". If you're having a transition only for the "left" property there is no point assigning it for "all".
I'm not sure if this alone will help you but it is always a good practice to compress your images and your scripts.
This stuff did the trick for me. Hope it helps.
The jQuery time-picker plugin that I wrote uses a div as the containing block for the list of times, and on Mobile Safari there are no scrollbars to indicate that there are more available times than are visible. I know about using two fingers to scroll within the div (on the iPad at least), but that only works if the user knows that there is more content to scroll to, and there's no indication that there is. So, my question: Has anyone been able to get scrollbars to show in Mobile Safari? How'd you do it?
Assuming you are using iOS5.0 or later, I think you have to use the following:
-webkit-overflow-scrolling: auto (this is default style)
auto: One finger scrolling without momentum.
The other available style is
-webkit-overflow-scrolling: touch
touch: Native-style scrolling. Specifying this style has the effect of creating a staking context (like opacity, masks, and transforms).
Using touch mode, the scrollbar will be visible when the user touches and scrolls, but disappear when not in use. If you want to make it always visible, then this old post will help you:
::-webkit-scrollbar {
-webkit-appearance: none;// you need to tweak this to make it available..
width: 8px;
}
Another Piece of Code for Thumb by #BJMC:
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Original Source
Edit: with respect to this demo's behaviour, you should use jQuery because it will help you a lot, $(document).ready(function(){//your code with timer}) code with timer will need to reset the CSS property to normal after desired time(let's say 5 sec.)
For the demo( that you have described), this is initiated with the onhover event, please check this fiddle I have created for that.
That reproduces the results in a desktop browser, and will also work in iPad, just add your timer code to suit your requirements.
Regarding the original question: the best solution to have scrollbars would be to use an external library (already recommended iScroll is good, but even jQuery UI itself contains scrollbars). But displaying ever-present scrollbars might deviate from the general iOS UI (see below).
Alternative would be to indicate with other GUI elements that the content is scrollable. Consider small gradient fields in the end of the element (the content fades to background there) that suggest that content continues when touched and scrolled.
In iOS5 overflow: scroll functions as expected, i.e it allows the the div to be scrolled up/down with one finger within the area specified by the dimensions of the div. But scrollable div doesn't have scrollbars. This is a bit different from the general UI in iOS(5). Generally there are no scrollbars also, but they appear when user starts scrolling a content area and fade out again after the touch event has stopped.
To answer Sam Hasler comment above.
Nicescroll 3 is a jquery plugin that does just what you want with fade in/out effect and work in all major Mobile/Tablet/Desktop browsers.
Live demo
Code:
$(document).ready(function() {
$("html").niceScroll({styler:"fb",cursorcolor:"#000"});
$("#divexample1").niceScroll();//or styles/options below
$("#divexample2").niceScroll("#wrapperexample2",{cursorcolor:"#0F0",boxzoom:true});
$("#divexample3").niceScroll("#divexample3 iframe",{boxzoom:true});
});
If you want to have the scroll to be always visible,
Do not set -webkit-overflow-scrolling: touch
then set custom style for scrollbar
::-webkit-scrollbar {
-webkit-appearance: none;// you need to tweak this to make it available..
width: 8px;
}
You loss the momentum effect, but scrollbar will always be there.
(tested under iPhone 4/ iOS 7)
Mobile safari, as far as I have seen won't support scrollbars.
The best plugin I could find to get the job done is this.
Its Demos are available here.
It also has multiple predefined skins to suit your application.
here's a sample of what you'll get -
By convention, scrollbars are not used on iOS.
For a div with overflow: scroll, the only native way to scroll is with two fingers.
You might take a look at iScroll, a JavaScript library which handles touch events and implements single-finger momentum scrolling (what users generally expect in native apps) for divs.
until ios5 you could not scroll internal divs - so you probably are not seeing a scroll bar when you try to scroll because there isn't one.
I haven't tested on ios5 but supposedly scrolling internal divs now works.
If it isn't an internal div then you should be able to see the scroll bar when it is scrolling only - this isn't just on ios anymore - lion has gotten rid of all native scroll bars too. You can only see them when a window is scrolling or when the window is first loaded.
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.