IFrame height issues on iOS (mobile safari) - javascript

Example page source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Page</title>
</head>
<body>
<div class="main" style="height: 100%;">
<div class="header" style="height: 100px; background-color: green;"></div>
<iframe src="http://www.wikipedia.com"
style="height: 200px; width: 100%; border: none;"></iframe>
<div class="footer" style="height: 100px; background-color: green;"></div>
</div>
</body>
</html>
The problem is, that height of 200px from the IFrames inline style is ignored on mobile safari:
Also I'd like to change the height of the IFrame dynamically via vanilla JavaScript which is not working at all with the following code:
document.getElementsByTagName('iframe')[0].style.height = "100px"
The value of the height style is changed correctly according to the dev tools but it's simply ignored since the actually rendered height of the IFrame doesn't change.
This only seems to be a problem in mobile Safari and is working as expected on the latest versions of desktop Safari, Firefox, Chrome, Androids WebView etc.
Testpage: http://devpublic.blob.core.windows.net/scriptstest/index.html
Ps.: I tested this with various devices on browserstack and also took the screenshots there since I don't have no actual iDevice at hand.

It looks like this: How to get an IFrame to be responsive in iOS Safari?
iFrames have an issue on iOS only, so you have to adapt your iframe to it.
You can put a div wrapping the iframe, set css on the iframe and, what worked for me, was to add: put the attribute scrolling='no'.
Wishing you luck.

I got the same issue. And after tried all solutions I could find, I finally found how to solve it.
This issue is caused by the iOS Safari, it will auto-expend the hight of iframe to fit the page content inside.
If you put the scrolling='no' attribute to the iframe as <iframe scrolling='no' src='content.html'>, this issue could be solved but the iframe could not show the full content of the page, the content which exceeds the frame will be cut.
So we need to put a div wrapping the iframe, and handle the scroll event in it.
<style>
.demo-iframe-holder {
width: 500px;
height: 500px;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.demo-iframe-holder iframe {
height: 100%;
width: 100%;
}
</style>
<html>
<body>
<div class="demo-iframe-holder">
<iframe src="content.html" />
</div>
</body>
</html>
references:
https://davidwalsh.name/scroll-iframes-ios
How to get an IFrame to be responsive in iOS Safari?
Hope it helps.

PROBLEM:
I was having the same issue. Sizing/styling the iframe's container div and adding scrolling="no" to the iframe didn't work for me. Having a scrolling overflow like Freya describes wasn't an option, either, because the contents of my iframe needed to size depending on the parent container. Here's how my original (not working, overflowing its container) iframe code was structured:
<style>
.iframe-wrapper {
position: relative;
height: 500px;
width: 100%;
}
.iframe {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
</style>
<div class="iframe-wrapper">
<iframe frameborder="0" scrolling="no" class="iframe" src="content.html"></iframe>
</div>
SOLUTION:
This super simple little CSS hack did the trick:
<style>
.iframe-wrapper {
position: relative;
height: 500px;
width: 100%;
}
.iframe {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100px;
min-width: 100%;
height: 100px;
min-height: 100%;
}
</style>
<div class="iframe-wrapper">
<iframe frameborder="0" scrolling="no" class="iframe" src="content.html"></iframe>
</div>
Set the iframe's height/width to some small, random pixel value. Set it's min-height & min-width to what you actually want the height/width to be. This completely fixed the issue for me.

Related

How to have an iframe fill up the entire mobile web page after setting a negative top margin

I currently have an iframe filling up my whole page, but I want to give it a -40px top margin to make it look better.
The iframe is on a mobile page and it's 640px width and 100% height.
I tried to do: height="calc(100% + 40px)" but that did not seem to work, instead it gave me the width of a small bar at the top of my page.
But this is essentially what I want, I want to iframe to extent to the bottom of the page after bumping it up 40px.
Please someone save my day here haha!
code:
<html>
<meta content='width=350px, user-scalable=0' name='viewport' />
<body style="margin: 0; height: 100%;">
<iframe style='margin-top: -40px;'
src="URLHERE"
frameborder="0"
width="350px"
height="100%">
</frameset>
</body>
</html>
</iframe>
You need to do what #APAD1 said PLUS adding the 40px to your 100% height. However, this will move your scrollbar up 40px as well and could initially hide it. Here is a full blown full width/height iframe solution, with -40px top:
html, body
{
height: 100%;
overflow: hidden;
}
.iframe
{
position:absolute;
top:-40px;
left:0;
width:100%;
height:calc(100% + 40px);
}
Fiddle here: http://jsfiddle.net/60xs8bro/

Scrollable Div appearing smaller in IE and Firefox

I have a scrollable div in td. It appears fine in Chrome however becomes really small in IE and Firefox but the height of the row stays the same. I have tried to change overflow:auto to overflow:hidden as suggested by some of the previous answers but nothing seem to work.
Additionally added <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to support browswer compatibility but still didn't work.
Height of the table row:
#inrm .quotelog {
height: 200px;
}
scrollable div
#inrm .scrollable {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: auto;
}
Inserting the div in HTML as
<tr class="quotelog">
<td>
<div class="scrollable"><%=rsOrderView("orderlog")%></div>
</td>
</tr>
Any suggestion or pointers would be appreciated.

Hiding the toolbars in iOS 7 using overlay hack

I've been reading around Stack Overflow and searching on Google for a reliable way to hide the toolbars on iOS 7 as the old scroll trick no longer works.
Based on this: http://mihhaillapushkin.wordpress.com/2014/01/20/stop-navigation-bars-from-appearing-in-iphone-ios7-safari/
I've tried the following:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<style type="text/css">
*
{
padding: 0;
border: 0;
outline: 0;
margin: 0;
}
html,
body
{
width: 100%;
height: 100%;
overflow: hidden;
}
div.content
{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 320px;
height: 480px;
background: orange;
}
#scroller {
height: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
overflow: scroll;
-webkit-overflow-scrolling: touch;
width: 100%;
}
</style>
</head>
<body class="default">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
setInterval(function(){
if((window.orientation == 90 || window.orientation == -90) && window.innerHeight != window.outerHeight) {
$('#scroller').show();
} else {
$('#scroller').hide();
}
}, 1000);
</script>
<div class="content">
<div id="scroller" style="z-index: 100000;position: fixed;top:0;left:0;right:0;bottom:0;">
Scroll up!
</div>
</div>
</body>
</html>
But scrolling up never actually hides the scrollbars. The #scroller is hiding and showing if the toolbars are visible or not, so half of it works, but just not the hiding unless I bounce the content into the toolbar, but if I scroll then the toolbars appear again.
Have I misunderstood the implementation?
If you want to hide the Safari Address bar you need to add this meta tags
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
The status bar can be hidden in iOS 7.1 and above with this meta tag
<meta name="viewport" content="minimal-ui”>
Okay, here is an answer from the author.
I have not dived into your code block, but just to clarify what I've told about in that post.
Firstly, I have shown an example of a game that has adopted an overlay that forces the player to scroll up until the bars go away. After the game detects that bars are no longer visible it locks scrolling until the player triggers navigation bars again, forcing him to go through the loop again.
Secondly, I have revealed a trick that for some reason deactivates navigation bar triggering ONLY for the top part of the screen. The bottom still triggers them as usual, so the the overlay I mentioned earlier is still needed. Thus this is a half-solution for the problem, but it is still better than nothing.
IMHO, the combination of those 2 approaches yields a good-enough solution for games and other applications that need full-screen without the need for scrolling.

Chrome scrollWidth is different on rtl and ltr direction

I see a bug on google chrome.
run the below html code on Chrome V 31
<!DOCTYPE html>
<html>
<head>
<title>Chrome scrollWidth issue</title>
<meta charset="utf-8">
</head>
<body style="direction: ltr;">
<div style="overflow: auto; height: 100px; width: 800px; border: 1px solid red;">
<div style="height: 150px; width: 1080px; background: blue;"></div>
</div>
</body>
</html>
When I change the body direction from ltr to rtl, the scrollWith of the parent div is different.
This is not occurred on FireFox V25 or Internet Explorer V10.
I report the issue on chrome issue tracker.
My question is how can I fix this with css or javascript?
Try to use clientWidth in the child element and you'll get 1080 in both rtl and ltr, hope that's a good enough solution till they fix the bug on chrome.
Add this on parent div's CSS
float:left

Implement Jquery viewport on ipad

Recently I have implemented a ebook like function web app runs on ipad . One function is to make a viewport to drag the book. I used this viewport plugin (with demo) : http://borbit.github.com/jquery.viewport/
The problem is the content can not drag .This work perfectly on desktop but not ipad.
There are two level of the ebook , the low level is a book page. when user click on the book, a overlay (top level) is display and it is an larger div for dragging.
I suspect ipad can not swift the higher level div. Is there any way to implement the viewport (refer to the example in above link) in ipad? Thanks
<div id="view" style="height: 385px; width: 1422px; position: relative; overflow: hidden; display: block;">
<div class="viewportBinder" style="position: absolute; overflow: hidden; height: 2541px; top: -1078px; width: 1247px; left: 88px;">
<div class="viewportContent ui-draggable" style="position: absolute; height: 1463px; width: 1247px; top: 329.98150634765625px; left: 0px;">
<div id="popup" style="height: 1463px; width: 1247px; display: block;"><img id="largeText" src="http://203.80.1.28/FlippingBook/development/demo/original/Web081112_P001_text.png"><img id="largeImg" src="http://203.80.1.28/FlippingBook/development/demo/original/Web081112_P001_image.jpg">
</div>
</div>
</div>
</div>
I think this can be easily solved using jQuery UI Touch Punch, this plugin adds touch event support for jQuery UI.
http://touchpunch.furf.com/
Try adding the script before the viewport script but after UI script, for example:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.js"></script>
<script type="text/javascript" src="jquery.viewport.js"></script>
<script type="text/javascript" src="https://github.com/borbit/jquery.scraggable/raw/master/jquery.scraggable.js"></script>
and that's all!

Categories