I ran into a following issue. I have a popup dialog with a scrollbar. In Google Chrome it has space reserved for a scrollbar. However, Firefox does not reserve any space for a scrollbar, so when it appears, it can overlap content (see screenshots). Probably it is somehow related with the fact, that firefox hides scrollbar unless you hover scrollable area. Could you suggest any solution to make firefox reserve space for scrollbar the same way as Chrome do?
Screenshot in Firefox
Screenshot in Chrome
Really great question! Unfortunately, As far as I'm aware, there is no simple solution to this problem. I would recommend creating a design that looks good with or without the space differences that the scrollbar creates.
But if you are dead-set on creating a more versatile solution, you could change the scrollbar using Javascript/Jquery (See this answer:Custom CSS Scrollbar for Firefox), or you could try and detect the browser, and accommodate extra padding for elements with scrollbars for users using Firefox(See this answer: How to detect Safari, Chrome, IE, Firefox and Opera browsers?)
Related
I've noticed that in Firefox, elements set to overflow: scroll or overflow: auto scroll quite a bit slower than the regular page scroll does. If you click on the top left Stack Exchange logo you can see what I mean if you use your mousewheel on the drop-down menu. Is there any solution, besides the about:config setting, to make these elements scroll as fast as the page?
This doesn't seem happen in Chrome, Opera, Safari or IE on Windows as far as I can tell. No idea about Mac, though (glad if someone could check/confirm).
Open Menu->Options->Advanced->General->Under Browsing Uncheck "AutoScrolling"
this should help
you could also uncheck the "Smooth Scrolling" option underneath. It only makes a marginal difference, but a difference nonetheless.
Do you have a smooth scrolling plugin installed on firefox?
We have a page with a table of invoices on it inside an iframe. In IE, horizontal scrolling works and looks fine. On Chrome, if you scroll over to the right, then back to the left, you see these ugly vertical lines:
This seems like a problem with doctype, but I've tried changing that and it hasn't helped. This only occurs in Chrome and only after horizontal scrolling; Firefox and IE do not show these. I'm thinking that it has to do with some HTML on the page that Chrome is rendering differently but I haven't been able to find exactly what it is.
Has anyone seen this before or have an idea on how to fix it?
I believe it's related to a Chrome bug:
https://groups.google.com/a/chromium.org/forum/?fromgroups#!topic/chromium-bugs/eUfzp3UJDwo%5B1-25%5D
A possible workaround (or hint for a workaround here):
Chrome bug: iframe rendering lines on screen when scrolling up
When I put style='direction: rtl;' the vertical scrollbar should switch sides and show on the left instead of right. This is how it works in IE and FF, but in Chrome it remains on the right.
Is it a known bug? Is there any way to fix it?
This is a known webkit bug. The scroll will render on the right in Safari, as well.
There's an answer here that has several different workarounds, including the jQuery plugin jScrollPane and a native-looking hack.
I have a weird one: on my site http://tustincommercial.com some pages are aligned slightly differently from others, giving a jumping effect.
Compare http://tustincommercial.com vs http://tustincommercial.com/who-we-are to see the effect.
The markup is identical, apart from the content in the middle. The same CSS is being applied.
Now, the real killer is that this difference disappears when developer tools are open. All browsers (IE8, Chrome, Safari, Firefox, Opera) show the difference when developer tools are not open. None of them show the difference when their developer tools are open.
Any ideas on the best way to find and fix the source of the difference?
The issue comes from the scrollbar appearing when your content goes past the bottom of the window. When the developer tools are open all pages need to scroll, so the jump disappears.
There are a few ways to fix this, but I currently can't tell you what would be best for your site. You could make it fixed width, you could try using max-width, or you could force the scroll bar to always be present:
html {
overflow-y: scroll;
}
I have a element on my form that looks like this:
<div style="overflow-y:auto;overflow-x:hidden;height:100%;width:100%">
In IE7 when the page first renders, there are no scrollbars. However, if I resize the page (even just 1 pixel) the scroll bars appear properly.
Is there something I can do so that the scrollbars show properly when the page first displays?
Set overflow-y to "scroll" if you always want a scrollbar.
That's the kind of problem which comes from the hasLayout bug in IE6 and IE7. It affects how IE renders the page. To get rid of the problem, you should consider reading this great page about the hasLayout behavior and its hacks. There's also the official Microsoft hasLayout dedicated page.
The hacks suggested are height: 0; and zoom: 1; depending on the version of IE you want to target and the type of your element.
I used overflow: scroll and it fixed my issue with the disappearing scrollbar on load. My tables are dynamically created and should scroll automatically when the page loads as I have enough data to start with.
I didn't have to make any other changes. Now it works in all three browsers IE7, IE8 and FF.
You should add margin-right: 20px to your style, so the scrollbar will have enoguh place to be displayed.
Try Internet Explorer 9 and see if your current script works there. Most probably it does work there, and if so, you might rethink your inner desire to make it all compatible with previous versions of Internet Explorers like 7 etc
With Chrome and FireFox stealing away audiences from IE to fast, I forecast that its only a matter of time that before such questions will be obsolete...
try absolute widths and heights, upon resize IE7 may be calculating the dimensions itself when you go to resize to page, whereas on page load it isnt...