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.
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 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!
I have an iFrame generated by ThingLink that I need to drop into an existing web page and behave responsively.
I would have thought that the usual CSS used to make YouTube or Vimeo iFrames would do the job. Which it does on most browsers, but for whatever reason this does not seem to be the case for Safari on IOS (Safari desktop appears to work). Why is this? Is there something in the Iframe's HTML that is causing an issue?
Here's a Fiddle showing the iFrame in question misbehaving (top) and a sample YouTube iFrame behaving (bottom).
And of course the actual code I am using
HTML:
CSS:
div.iwrap {
width: 100% ;
position: relative;
padding-bottom: 60%;
height: 0;
-webkit-overflow-scrolling:touch;
overflow: hidden;
}
.iwrap object,
.iwrap iframe,
.iwrap embed {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100% !important;
height: 100% !important;
border: none;
}
iframe,
object,
embed {
max-width: 100%;
}
You can see I've tried trying out the absolutely positioning each corner of the iframe, but with no joy.
I should stress that it is only Safari on IOS that it breaks. Safari for desktop and Android for mobile look good.
Any pointers to get that working would be much appreciated, but more importantly, why isn't it.
Using responsive iframe code I devised for myself, and using your src= url, I created and tested this Pen on CodePen.
Using CodePen's CrossBrowser Testing, the Pen displays and functions correctly on Android mobile devices. (With one exception: the embedded Youtube video has no audio in CrossBrowser Testing although in normal view it does.) But on iOS devices it displays only a black square where the content should be.
I'm not certain from your post whether this is the failure you are talking about.
I have other Pens, e.g., Responsive Iframe - Base Code, which function correctly on iOS devices. Just the one using your src= url does not.
This leads me to wonder whether, even though using known responsive HTML and CSS, there is something about the source that's not playing nicely with iOS.
I'm not sufficiently versed in the technology to be able to suggest what that might be, however, I hope I've demonstrated that even with code known to be responsive the source document doesn't display in iOS. Thus, the problem appears not to be with the code but rather some conflict inherent between the source and iOS.
Sorry I couldn't be of more help, but maybe this will help you to rephrase the question and question title more narrowly and specifically so that it will grab another user's attention.
The editor insists that, with a link to CodePen, I must include some code. So, merely to satisfy that requirement, here is my responsive HTML and CSS code.
HTML:
<div id="Iframe-Thinglink"
class="set-margin set-padding set-border set-box-shadow
center-block-horiz">
<div class="responsive-wrapper
responsive-wrapper-wxh-600x480"
style="-webkit-overflow-scrolling: touch; overflow: auto;">
<iframe src="//www.thinglink.com/channelcard/632903487365054466">
<p>Error Message Here</p>
</iframe>
</div>
</div>
CSS:
/* CSS for responsive iframe */
/* ========================= */
/* outer wrapper: set the iframe's width and height by setting
max-width & max-height here; max-height greater than
padding-bottom % will truncate to padding-bottom % of max-width */
#Iframe-Thinglink {
max-width: 600px;
max-height: 100%;
overflow: hidden;
}
/* inner wrapper: make responsive */
.responsive-wrapper {
position: relative;
height: 0; /* gets height from padding-bottom */
/* put following styles (necessary for overflow and scrolling
handling on mobile devices) inline in .responsive-wrapper around
iframe because potentially unstable in CSS:
-webkit-overflow-scrolling: touch; overflow: auto; */
}
.responsive-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: none;
}
/* padding-bottom = h/w as % -- sets aspect ratio */
/* YouTube video aspect ratio */
.responsive-wrapper-wxh-650x315 {
padding-bottom: 56.25%;
}
.responsive-wrapper-wxh-600x480 {
padding-bottom: 80%;
}
/* general styles */
/* ============== */
.set-border {
border: 5px inset #4f4f4f;
}
.set-box-shadow {
-webkit-box-shadow: 4px 4px 14px #4f4f4f;
-moz-box-shadow: 4px 4px 14px #4f4f4f;
box-shadow: 4px 4px 14px #4f4f4f;
}
.set-padding {
padding: 40px;
}
.set-margin {
margin: 30px;
}
.center-block-horiz {
margin-left: auto !important;
margin-right: auto !important;
}
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