i have a full screen layer for mobile devices and use these css lines:
#buttons{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: yellow;
z-index: 99999;
}
Whenever I scroll the page, the fixed layer slightly moves on top until it disappears completely. Any idea how to prevent this? Thanks very much!
Related
I have a mobile menu with position:fixed and min-height of calc(100vh - 48px). Top is set to 48px. In the mobile menu I have a wrapper set to height:100% and overflow:auto. I tried setting it to min-height: 100% but it doesn't work. When the content gets taller, the content inside is hidden and there is no scroll. I have set overflow to auto and then tried scroll on the mobile menu but nothing works. What may cause the problem?
.mobile-nav__menu {
width: 100vw;
min-height: calc(100vh - 48px);
position: fixed;
top: 48px;
bottom: 0;
right: 0;
visibility: hidden;
opacity: 0;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
z-index: 21;
overflow: auto;
}
.mobile-nav__menu-wrapper {
min-height: 100%;
width: 100%;
background-color: #fff;
overflow-y: auto;
}
Try to set the height property on window resize javascript event something like that;
var onresize = function() {
height = document.body.clientHeight;
}
window.addEventListener("resize", onresize);
Try using percentage instead of absolute px values.
For example,if u want a header of height 10px on a screen that is 1000px tall, type in "1%" instead of "10px".
This will help the header to adapt to different screen sizes.
Also try adding background-size:cover OR background-size:100% in the css class.
I have a strange problem with webkit-overflow-scrolling: touch property in IOS 10 - when the modal has longer content it gets 'stucked' or 'frozen' and not scrollable. First of all, I prevented the pinch zooming on the modal with JavaScript because I thought it caused the problem - no effect. I've also tried all the suggested fixes I could find, and still when the modal is longer, sometimes (not every time) it gets stucked when has been scrolled.
This behaviour definitely comes from the webkit-overflow-scrolling: touch property, because when I remove it or set it to auto, the modal doesn't freeze but the scrolling becomes awful - not smoothly at all.
Could someone suggest me a fix? Any help will be greatly appreciated.
This is part of the code:
.body.modal-open {
position: fixed;
width: auto;
overflow: hidden;
}
.modal-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 2500;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;
&::before {
content: '';
display: inline-block;
height: 100%;
}
.modal {
position: relative;
display: inline-block;
width: 550px;
z-index: 3000;
}
}
I have a light window with fixed position at 100% width and height on the mobile with overflow-y auto as light window is larger then most mobile displays. Following are two css classes that i have
.noscroll { // add to body when the lightwindow shows to prevent body scrolling
overflow: hidden !important;
}
.lightwindow {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow-y: auto;
}
It is working fine except on iPhone the scrolling is very choppy and jumpy, I would like it to scroll just like regular smooth scrolling on iPhone.
Thanks
You are looking for momentum type scrolling for touch devices like iphone where a flick of the finger sends the web page scrolling and it keeps going until eventually slowing down and stopping. Chris Cover has a solution explained here
To apply it to your code, you should add -webkit-overflow-scrolling: touch; your lightwindow class and also overflow-y: scroll; so it will become something like the following
.lightwindow {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
}
Hope this helps.
I am making my portfolio and i get stuck. I just made small view of it...how should it look. I started testing it on my PC it is OK...just how i want...than i started to test it on my iPad and the BACKGROUND-IMG was not fit but on my Sony Xperia mobile it was OK as on my PC. Can you please help me? Thank's
---> link to testing website: http://marten.esy.es/
I hope there are some people which should help me with that :) Have a nice day!
There are a couple of things. I would remove the fixed position from your background on slide 1. Then change the property of background-size to cover. This allows you to set a height for each of your media queries. I would also suggest adding background-position: center; so the image always stays in the center relative to the div.
.slide1 {
background: url('mountainsmorning.jpg') 50% 0 no-repeat;
color: #fff;
height: 400px;
margin: 0;
padding: 25% 0 30% 0;
background-size: cover;
text-align: center;
}
as far as i could understand your question and after looking at the example i think the problem is with the covering the background to the whole view-port. If it's such then use the following style for your .slide1 element.
.slide1 {
background: url('mountainsmorning.jpg') 50% 0 no-repeat fixed;
color: #fff;
/* height: 400px; */
margin: 0;
padding: 25% 0 30% 0;
background-size: cover;
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Note: And don't use fixed height or width as you're developing for multiple screen sizes. Else's is fine.
I made a website that looks exactly like it should on Firefox but unfortunately not on iOS (which uses Safari webkit) and chrome on some devices of the device. It just doesn't properly display the Menu-Bar (it should be position fixed). The problem here is, that I don't really know what the issue is.
Screenshots:
White space between address bar and photo should be the menu:
Here you see that you only see the menu when it's above the parent
I can't really figure out why it behaves like this, because according to various wikis position fixed is relative to the viewport and not it's parent "the viewport is always their containing block" ( http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Summary )
*The CSS:
.main-navigation {
clear: both;
float: left;
width: 100%;
position: fixed;
width: 100vw;
height: 6rem;
background: -webkit-linear-gradient(top, #fff, #d6d6d6);
background: -moz-linear-gradient(top, #fff, #d6d6d6);
background: -ms-linear-gradient(top, #fff, #d6d6d6);
background: -o-linear-gradient(top, #fff, #d6d6d6);
top: 0;
right: 0;
z-index: 100;
overflow: visible;
}
nav {
display: block;
}
.home header.site-header {
top: 24rem;
left: 8rem;
position: absolute;
z-index: 3;
}
.home header.site-header is the parent of the menu
There are so many issues with :position: fixed; on mobile devices/with mobile browsers, that I don't even know where to start.
http://bradfrost.com/blog/mobile/fixed-position/
Check Brad Frost's article on the matter and you will see why this is not an easy task to accomplish.
What could help is Filament Group's fixed-sticky-fix:
https://github.com/filamentgroup/fixed-sticky