I know this problem has already been discussed, but I'm not here for the scroll in jQM panels. The solution given here works perfectly : Scroll JQuery Mobile Panel Separately From Content
.ui-panel.ui-panel-open {
position:fixed;
}
.ui-panel-inner {
position: absolute;
top: 1px;
left: 0;
right: 0;
bottom: 0px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
At least under iOS 6 and 7.
Under iOS 5, it doesn't work at all. I can scroll the content of the page, but the panel stays fixed when I open it. I tested the -webkit-overflow-scrolling : touch property, and it works in other websites. I just need it working with jQuery Mobile.
The website would be perfect if you could help me to make this work!
Thank you all in advance,
Adrien B.
Related
I'm working on a website where the client would like the menu to be static at the top of the page, and when the menu is opened it opens a static menu which can be scrolled in case there are more menus than on the screen.
I have this working correctly expect apparently on iphone 6 (not sure if other iphones are affected) when a user first scrolls the menu goes the opposite direction of the scroll. After first touch, it works fine.
http://readysalteddev.co.uk/hotrod/
CSS
.menu-primary-menu-container {
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
margin: $header-scrolled-height 0 auto;
z-index: 99999;
display: none;
-webkit-overflow-scrolling: touch;
position: fixed;
overflow-y: auto;
height: auto;
max-height: 100%;
}
ul {
padding: 0;
list-style: none;
margin: 0;
-webkit-overflow-scrolling: touch;
float: left;
display: block;
width: 100%;
height: 700px;
}
I read somewhere while researching that -webkit-overflow-scrolling: touch; might have helped, but apparently it hasn't.
I'm working blind as I only have an ipad and android for testing, and it seemingly works perfect on both of these, including every web browser (not IE of course)
UPDATE
Just saw on another question that maybe adding
-webkit-transform: translateZ(0);
-moz-transform:translateZ(0);
-o-transform:translateZ(0);
transform:translateZ(0);
Might help. Uploaded it and waiting on tester to confirm what happens.
UPDATE AGAIN
Didn't help apparently.
i see some problems when the menu is opened (i can still scroll the page)
maybe you disable scroll all together when the menu is opened
you can do this adding overflow: hidden & height: 100%; on HTML
what OS does that Iphone have? older version have problems with position: fixed
EDIT after inspecting your code
there are a lot of containers floated in mobile breakpoint . maybe you remove those floats
html & body receive overflow: hidden & height: 100%;
#site-navigation .menu-primary-menu-container gets fixed height & overflow: auto
the fixed height should be 100% so it takes the entire screen (or 450px if u dont care that much) . but adding 100% wont do the trick . because that container is inside a bunch of other containers (some of them) with fixed height and overflow hidden (not auto) . so if u want to achieve 100% on the menu . then #header is the place to start . make its 100% height (only on menu opened state) and go down the line until you reach the menu .. or get the entire menu of #header
hope it helps . gl
My site is www.familyhistoryconferencenwa.org
I have a MacBook Air, an iPhone 5 and an iPad Air so I phrase this for iOS 8.1.1 but obviously I want the solution to work for all tablets and smart phones across all platforms.
On the "Class Schedule" page of the site I have an iframe that works correctly on my MacBookAir running OS X Yosemite (10.1.1) but on my iPad Air and iPhone 5 running iOS 8.1.1 the frame width displays improperly. It extends to the right beyond the right edge of the page. If you visit the site on a a desktop or laptop then on a mobile device you should see what I mean.
My question is: what code do I use to get the iframe to display properly on mobile devices?
The relevant code is:
<div style="text-align: center">
<iframe src="url"; frame-border="1"; height="600px"; width="100%">
</iframe>
</div>
As I said, this code works correctly on the MacBook Air. The iframe occupies the width of the page. But on the iPhone and iPad the frame extends beyond the right border of the page. What am I doing wrong? (By the way, if I set the height to 100% I inexplicably get a frame about 200 px high although the source document takes 600px to view all of it.)
I've consulted two texts on HTML coding, searched other forum sites on the web and searched this site for the answer to similar questions but have had no luck. I've seen the item "Iframe on mobile devices problematic" on this site but I'm really hoping that I'm not stuck with that for an answer.
Any help will be greatly appreciated.
Thanks
Steve
The best responsive iframe code I've come up with thus far is:
// HTML:
<div class="iframe-container iframe-container-for-wxh-500x350"
style="-webkit-overflow-scrolling: touch; overflow: auto;">
<iframe src="http://urlToTargetSite.com">
<p style="font-size: 110%;"><em><strong>IFRAME:</strong> There is
iframe content here but your browser version does not support
iframes.</em> Please update your browser to its current version
and try again.</p>
</iframe>
</div>
// CSS:
.iframe-container {
position: relative;
margin: 5px;
height: 0;
overflow: hidden;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
border: 1px solid #7a8b8b;
/* put following styles (necessary for overflow and
scrolling handling) in div container around iframe
because not stable in CSS
-webkit-overflow-scrolling: touch;
overflow: auto; */
}
.iframe-container-for-wxh-500x350 {
padding: 10px 10px 70% 10px; /* padding-bottom = h/w as a % */
}
The rationale behind the code can be seen at How To Make Responsive Iframes -- It's Easy!
There are three salient points:
Set no attributes in the iframe opening tag, specifically not width and height.
Put a div container around the iframe, and use CSS height: 0; and then padding-bottom: nn%; to give the container a height equal to the height:width ratio expressed as a percentage.
Style the div inline with -webkit-overflow-scrolling: touch; and overflow: auto; which are necessary to handle scrolling and overflow on mobile devices and are unstable in CSS.
I am trying to finish my first website and thought it was pretty much finished but am having an issue with viewing some page layouts on an iPhone 5 (S and C). On my 4 it's fine and on an iPad I tested it on. Also fine on Android.
The issue is the fixed navbar (bootstrap) is bouncing around on the galley pages (it's a photography site) which have a horizontal scrolling div but it's ok on standard page layouts. I have disabled a mouse wheel plugin it's running to check if it's that and it has no effect on the iPhone 5 issue. Normal layout pages are fine.
the url is: http://www.pjrundle.co.uk
The problem occurs on any of the photography pages.
Sorry if this is a really obvious newbie question. Here is the css for the div containing the side scrolling gallery. I tried removing absolute positioning and no effect.
.scroll {
white-space: nowrap;
background-color: white;
padding-top: 73px;
position: absolute;
left: 0px;
}
Any advice greatly appreciated.
Thanks.
Thanks mijopabe, I fixed it in the end by adding:
.scroll {
white-space: nowrap;
background-color: white;
padding-top: 73px;
position: absolute;
left: 0px;
width: 100%;
overflow: auto;
}
Not really sure why it worked without this on other browsers to be honest but fixed anyway.
Cheers.
This is only for Safari on the ipad
I have the following css on a div with content inside overflowing:
#some_div{
position: absolute; top:0px; left: 0px; right: 0px; bottom: 0px;
overflow-y:scroll;
overflow-x:scroll;
-webkit-overflow-scrolling: touch;
}
However after a while, or sometimes when hiding and bowing the div, the scrolling just stops working.
Has anyone has this before or knows how to fix it?
Cheers!
I was able to get around this "bug" by preventing the default behavior on the body tag
$('body').on('touchmove', function (e) {
e.preventDefault();
});
I had the problem on an iframe though
There's an iframe, which basically has more content than fits into the frame. The sizing of the frame is based on the browser screen size and lets the overflow scroll, which works perfectly on all browsers, except for iOS. On iOS, safari decides to resize the frame to fit the content. Not what you'd expect.
Example code on jsFiddle:
http://jsfiddle.net/R3PKB/2/
Try it out on your iOS devices:
http://jsfiddle.net/R3PKB/2/embedded/result
The HTML:
<div class="frame_holder">
<iframe class="my_frame">
// The content
</iframe>
</div>
The CSS:
body {
position: relative;
background: #f0f0f0;
}
.frame_holder {
position: absolute;
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
background: #ffffff;
}
.my_frame {
width: 100%;
height: 100%;
border: 1px solid #e0e0e0;
}
You can make it work by adding a wrapping div with overflow: auto; and -webkit-overflow-scrolling:touch;.
Here's your example with it: http://jsfiddle.net/R3PKB/7/
According to previous questions on SO it's a bug since iOS 4. I found more info here:
https://stackoverflow.com/a/6721310/1047398
iframe on iOS (iPad) content cropping issue
This is an old question, but since it comes first on google and the issue exists on nowadays ios devices, I repost a better fix that I found on this page:
How to get an IFrame to be responsive in iOS Safari?
Basically, if you have an iframe with scroll (let's say a twitter widget), the solution above won't work very well because it makes the parent scrollable. The fix that worked for me is replacing height: 100% with height: 1px; min-height: 100%;.
If iOS Safari is displaying your iframe content from a different origin than expected (i.e. it is shifted over by some pixels), try adding scrolling="no" as an attribute to the iframe. This should prevent it from automatically fitting its content.
More here.
using height: 1px; min-height: 100%; did not work for me, though I did not need a scrolling element. I had to use the overflow:auto; on a surrounding div instead. Note that this method is discouraged as it may have unintended consequences, but I tested on Android/iOS and desktop browsers and could not find any issues yet. fingers crossed.
This is a nice post from Andy Shora on some iOS iframe nuances: http://andyshora.com/iframes-responsive-web-apps-tips.html