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.
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'm trying to work with the nice parallax effect in this template. It seems to work well with all browsers except mobile Safari (unusually)!
http://wrapbootstrap.com/preview/WB002R8U1
Look at the ABOUT and FOURTH sections on an iPad and the background image goes missing (presumably because it's stuck to the top of the page behind the other elements.
Anyone know a workaround for this?
Many thanks.
parallax on mobile iOS is not that easy: safari blocks all rendering while scrolling (for performance boosting), therefore you can't measure the current scrolled distance and apply it to the background position. the picture would only refresh it's position when you've finished scrolling (and without animation, so you wouldn't see anything of it).
There are workarounds but they're not as easy to implement. one of them is http://markdalgleish.com/projects/stellar.js/ with its iOS techdemo.
Best solution: split your css markup and let parallax only be visible to desktop devices. As parallax needs a lot of power (because it's not hardware accelerated), it's not very suitable for mobile devices anyway.
In Webkit, will a 3D CSS transform set to repeat indefinitely, continue even when it or a parent element is hidden from view by styling (CSS)?
The reason I ask is that I am seeing unexpectedly high CPU usage on a page I am developing.
If anyone knows a good way to diagnose this issue (for example visualizing where CPU cycles are going on a page, as opposed to a blanket CPU usage per tab), I would be very grateful.
Anecdotal evidence (removal of the hidden CSS animation) would suggest that the animations do run in the background. Does anyone know how to prevent this?
In chrome 16.0.912.75, at least CSS animations appear to continue even when the element is set to visibility:hidden;. Setting display:none appears to resolve the issue.
you can debug this kind of situation with the developer tools
chrome / safari right click inspect element.
Go to the timeline tab and click on record, after that you can see what the browser is doing internally.
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.)
I am getting a number of strange rendering issues in IE6/IE7 when there are transparent backgrounds applied to the elements involved.
They have included but are not limited to:
When scrolling back up a page a background image appears moved as if padding is applied.
When hovering over a link the background image applied to its containing div appears to disappear.
When using a drop down, hovering over a containing element of the drop down closes calls the mouse out event.
These are just 2 of the 7 I have had to fix so far and as you can see they are unlinked and a pain to debug and I am sure there will be a number more that I will encounter before this project is over.
To stop I have modified a default CSS rule that was setting nearly all elements to have a default image of "spacer.gif" - a 1KB 1x1 transparent image.
Old:
background: transparent;
New:
background: url('../images/spacer.gif');
However I am now worried about the overhead this could have on both the server and client machines. Such as increased loading times (and load on the server) caused by downloading the spacer.gif for each element from a "dumb" browser and a CPU hit on the client side when scrolling through the page as it has to render the additional images.
Are my worries justified and if so how can they be rectified? Or am I just worrying over nothing and this is an appropriate fix for such a stupid issue??
tl;dr - transparent backgrounds on elements (NOT images) causes issues caused by the way they are interpreted in IE. This is not a rendering of images issue this is a IE-logic-fail issue.
Thanks in advance.
I use this css hack for giving IE < 7 a gif file and everything else a 24 bit png with transparency.
background-image:url(/images/sprites/icons-sprite.png);
_background-image:url(/images/sprites/icons-sprite.gif); /* IE<7 gets the crappy icons */
IE 6 supports gif transparency just fine.
Depending on the scale of things really determines how much it'll affect your server load. Ideally if you're planning on making this a significantly big deployment you should already be doing the most suitable standard methods of handling static content: cache headers, separate (sub)domain for static content, reverse proxies, CDN deployment etc.
In terms of the CSS, you either have nasty hacks like Javascript or spacer images to get around IE6/7, or restrict the way you use your page styles so that these problems don't exist because you aren't using the things that cause them. It really depends on what you feel is of greater importance.
IE 6 (and possibly IE7, I'm not sure) has some weird transparency issues.
Check out http://homepage.ntlworld.com/bobosola/index.htm for the fix which I use all that time - just have to add a little javascript and convert any gifs you have to png.
Look at this article: PNG8 - The Clear Winner
You will need Fireworks for this fix. Since I discovered this writing I use it all the time. Major plus: you do not need different images for different browsers. PNG8 is good for all.