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.
Related
I am using foundation framework. When I scroll down to the page in firefox and open the Reveal result in gray overlay only here i need to scroll to the top by myself to see the Reveal. I added this CSS to the model.
#id-of-the-reveal-element {
position: fixed;
top: 100px !important;
}
This is working fine but the slideDown and slideUp not working as normal instead it will just fadeIn and fadeOut in both Firefox and Chrome. What is the solution for this issue to get the normal behavior of the Reval as in Chrome.
Take a look here, at Ken Smith's Post
By adding onclick="javascript: location.hash='#page'; location.hash='';" to the button/link that opens modal it will automatically scroll for you.
Just replace #page with your modal id.
Unfortunately this is only a temporary workaround. Hope it helps though!
comment out your CSS...
#id-of-the-reveal-element {
position: fixed;
top: 100px !important;
}
whenever foundation reveal js tries to position its modal box on the center of the screen or the place you trigger the modal box, your CSS forces it to display 100px from top of the page with fixed position.
else you could post your code (structure) of the triggering part and the reveal modal box so that I could get a clear idea.
So, I'm having issues with a fixed background on mobile devices. When viewed in Chrome on my Windows 7 laptop, the background looks fine; the image (which is thin) tiles horizontally and stays fixed to the viewport. In Chrome on my Android phone, though, the background sticks to the top of the page, disappearing as a I scroll down.
Now, I already know these mobile browsers have a different idea of what a viewport is, and therefore background-attachment:fixed; will not work, but none of the solutions I find seem to fix anything (or maybe I'm just misunderstanding them). The general suggestion seems to be to apply a wrapper div to the page that holds the background instead, which I tried to do based on this blog post:
#wrap {
background-image: url(../img.png);
background-repeat: repeat-x;
background-position: left top;
width: 100%;
min-height: 100%; /* sticky footer */
overflow-x: hidden; /* sticky footer */
}
This does not fix my problem at all; it just messes up the fixed appearance on the laptop. Is there something I'm not understanding? I'm very new to web coding (CSS/HTML), so I think there may be something I'm just missing here.
On opera-mobile worked perfectly. In Safari iOS6 (Iphone) did not work (not sure if it's a browser crash or code).
I recommend to use this iScroll4:
http://cubiq.org/iscroll-4
or iScroll5 (beta test):
http://cubiq.org/iscroll-5-ready-for-beta-test
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.
The search section in my site www.anahatainternational.org displays correctly across FF, Chrome, and Safari. But in Safari mobile it displays in the middle of the page.
#search_section {
position: absolute;
right: 490px;
top: 10px;
z-index: 5;
}
Thanks.
I would suggest making few changes to the layout of the page so that you could make the #search_section relative to the header.
I have create a skeletal structure for it. http://jsfiddle.net/AACuy/
Also remove the left, top and position:absolute properties.
There are too many classes in the site for me to make changes using firebug and show the result.
Working in Chrome, I found the AngularJS animations appear to break elements that have position: fixed applied to them. I can not reproduce the issue in Safari or Firefox.
I'm unsure if I'm doing something wrong, or if I could be doing something better to fix the issue.
I have a Plunker illustrating the issue here: http://plnkr.co/edit/fhI7M7ev75AGYzesf4GB?p=preview
To reproduce, the following must be done (as the layout of Plunker seems to fix the issue):
Run the Plunk (in Chrome)
Breakout the preview into a new window
Reduce the height to show just the colored box
Click on the "Click Me" button and then scroll to witness issue
If you reload the scrolling list page the top banner will be correctly fixed to the top.
The CSS for the top banner is simple:
.fplcd-top-banner {
background-color: #7c7c7c;
background: linear-gradient(to bottom, #7c7c7c, #666666);
height: 50.15745px;
left: 0;
margin-bottom: 7.16535px;
padding: 7.16535px;
position: fixed;
top: 0;
width: 320px;
z-index: 10; }
If you edit the plunk and remove the animation (at the bottom of the CSS file, comment above them) styles, the issue no longer persists.
Is this a known issue, or am I doing something just odd enough that would knock Chrome out of whack? In either case, is there a tweak that can be done to fix this up?