Scrollbar in boxes with both overflow auto and pointer-events none are not responsive to clicks in firefox.
I have created a very basic jsfiddle reproducing the bug:
http://jsfiddle.net/PgaeC/2/
.out {
overflow: auto;
pointer-events: none;
height: 100px;
}
.in {
height: 200px;
}
this works in chrome and internet explorer (tested with ie9 and ie10)
in firefox the scrollbar is unresponsive and cannot be clicked at all.
any idea how to give clicks back to the scrollbar in firefox ?
What i want is a box handling click, and another box sometimes going over it, grabbing clicks on its own, with a space on top where you can still interact with the bottom box, and the scrollbar spanning on the whole page
like this : http://jsfiddle.net/NczQG/2/
EDIT: created bug in mozilla bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=880671
(as seen in https://bugzilla.mozilla.org/show_bug.cgi?id=880671)
the mozilla team fixed it :
http://hg.mozilla.org/mozilla-central/rev/f8bf18dceb1c
so it's fixed on the nightly.
Related
Codepen: https://codepen.io/Bobby__K/pen/eYZXQKo
I made a navbar with the encompassing nav given position: fixed.
.main-nav {
position: fixed;
z-index: 10;
left: 0;
top: 0;
padding: 0 5%;
height: 100px;
background-color: white;
width: 100%;
}
When I run this on Chrome, Firefox, and Firefox mobile, it works as intended; i.e. the navbar doesn't move and stays at the top. However, when I run it on Google Chrome mobile and scroll down, the navbar goes up a bit and then the fixed positioning seems to kick in. The problem here is that this cuts off a good 10% of my navbar.
Since this only happens when I preview Google Chrome's mobile view, I was wondering if this was just a visual bug shown in developer tools, instead of something that would happen once the website's live.
Notes:
I've made it responsive using the input method and with CSS :checked. As such, I usually keep the checkbox to the side with overflow-x hidden. I've tested the project while having the checkbox on the screen, but the same problem happens, so that wasn't the problem.
I've also tested this on Opera mobile view and Brave mobile view and the scrolling issue happens there too; so maybe this is something to do with how my code reacts to the Chrome Engine?
I've narrowed it down to a weird interaction with my #media screen and query. Whenever I make a change, it fixes the problem. However, once I close developer tools and reopen it, the scrolling issue reappears.
do you happen to have a codepen or something with the full html and css (and js if applicable). I'm wondering if there's a conflicting style outside of .main-nav that's causing this.
I am building a website that is heavily dependent on bootstrap modal windows. And it works fine in Chrome, Safari, and miraculously IE, but for some reason it seems to be messing up in Firefox on both Windows and Mac.
I have a set height in the modal content so that the modal fits most of the page, like so
.largeModal div.modal-content.padded {
height: 90%;
}
and then the iframe within has a height on it as well
largeModal iframe {
width: 100%;
height: 90%;
overflow-x: hidden;
}
Both heights are ignored in Firefox and the window being rendered so small that you can't read anything inside it. Is there anyway to fix this?
So far I have tried setting the heights as pixies and ems as well, but that doesn't seem to help. I have also tried max-height and min-height, but those are ignored as well.
The navigation looks perfect in every browser (Chrome, Firefox, IE9) but in Safari Mac it "Learning Center" in the navigation isn't stretching far enough.
It's like it's missing some padding or margin on all the menu items.
Here's the link for the site. http://previewyournewwebsite.info/otsl/about-us
Why doesn't it work in Safari and what can I do to fix the issue?
In the body trying making it the full with and setting margin to 0:
html, body
{
width: 100%;
margin: 0px;
}
I'm doing some web development and for some reason on some of the pages the scrollbar on the right side of the window is transparent or white when using Chrome. I've looked through my css and I don't see any scrollbar styling set. The scrollbars look normal in firefox.
If it's because the page is so short that no scroll bar is required, but you still want it to show up, you can set the overflow-y CSS property to scroll on the html element of the page. For example:
html {
overflow: auto;
overflow-y: scroll;
}
http://metagraf.github.io has been behaving well in all tested browser until IE10 came along. The top menu is overlaying the entire page when viewed in IE10.
A screenshot of how the page looks in IE10 can be seen here: https://dl.dropboxusercontent.com/u/2897577/ie10.png
Any ideas on how to fix this?
regards Oskar
So when I run the site in question in IE 10, yes indeed, the top menu does look buggy in IE 10.
The immediate source of the problem is the img in the navbar.
If you hit F12 and use IE's developer toolbar, and then if you set the width property of the img from auto to just being un-checked (so that auto is no longer the value, the site all of the sudden looks normal.
Digging deeper into the issue, here's the css setting for img in bootstrap:
img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Ok, so what in the world is width: auto\9?
Well, looks like it is an IE hack, but a hack that does not apply to IE 10.
CSS \9 in width property
http://www.paulirish.com/2009/browser-specific-css-hacks/
So as a quick fix, I suppose one thing you could do would be to set a custom css property
on the img in the navbar that is exact about the width of the img.