I am trying to scroll an iframe on iOS, and I succeeded, it's scrolling well, reference:
http://home.jejaju.com/play/iframe-scroll.html
http://areaaperta.com/nicescroll/demo.html
BUT, all solutions have an issue: the iframe page is not completely displayed...
I tested on my iphone and ipad, the iframe page displays choppy.
any idea?
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9;FF=3;chrome=1;OtherUA=4" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(function(){
if (/iPhone|iPod|iPad/.test(navigator.userAgent))
$('iframe').wrap(function(){
var $this = $(this);
return $('<div />').css({
width: $this.attr('width'),
height: $this.attr('height'),
overflow: 'scroll',
'-webkit-overflow-scrolling': 'touch'
});
});
})
</script>
<title>Untitled</title>
</head>
<body>
stuff
<div>
<iframe src="iframe-scroll-long.html" height="500" width="500"></iframe>
</div>
more stuff
</body>
</html>
This solution is a bit of a hack, but is tested and works fine on iOS:
<div style="width: 760px; height: 500px; overflow: scroll !important;-webkit-overflow-scrolling:touch !important;">
<object type="text/html" data="HTTP://YOURPAGE.URL" style="width:1000px; height:10000px;">
</object>
</div>
Basically, since scrolling works fine in a DIV, you embed your page code using the object tag. The problem is, due to the same origin policy, you can't determine your target page's dimensions. I found that setting a huge page size is perfectly workable (no delay or choppyness noticed...just blank space)
You can easily determine the client OS and only add this code to iOS devices.
I found a combination of div with "absolute" style and nicescroll do fix choppines.
You have to load nicescroll on the page loaded by iframe.
In the same page wrap all you content with a div (with style absolute)
#content { position:absolute; }
Load nicescroll using wrapped div content.
$(document).ready(function() {
$("html").niceScroll("#content");
});
Link to demo page, so you can check the code: http://areaaperta.com/nicescroll/demo/iframe6.html
Automatically, with iOS native scroll has used, in other platform you got nicescroll active.
I have test on iPad with iOS 5.1.
Try adding -webkit-transform:translate3d(0,0,0) to the iframe style and all elements within to force hardware acceleration - should reduce the choppiness.
In main page style:
iframe { -webkit-transform:translate3d(0,0,0); }
and in iframe style:
p { -webkit-transform:translate3d(0,0,0); }
I found this to be a problem with relatively positioned content inside the frame.
Get rid of this behavior when removing position: relative;
Related
I have a set of simple SVG files in a scrollable DIV. You may see a demo here: http://www.ron2.byethost16.com/docviewertest.html This SVG list can be scrolled without problems in all major desktop browsers including Chrome and in some mobile browsers (Edge Mobile, Firefox Mobile and Android browser). However, in Chrome Mobile there is a problem: when scrolling it fast, some content on some SVG images is cut off and is not displayed, after a bit scrolling it may reappear but other content may disappear and so on (see these screenshots: http://imgur.com/a/rxZnK).
My HTML page code follows:
<!doctype html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>Test</title>
<style type="text/css">
iframe {
width: 935px;
height: 1210px;
overflow:hidden;
}
</style>
</head>
<body>
<div style="overflow: auto; width: 100%; height: 100%;">
<iframe src="page1.svg"></iframe>
<iframe src="page2.svg"></iframe>
<iframe src="page3.svg"></iframe>
<iframe src="page4.svg"></iframe>
<iframe src="page5.svg"></iframe>
<iframe src="page6.svg"></iframe>
<iframe src="page7.svg"></iframe>
<iframe src="page8.svg"></iframe>
<iframe src="page9.svg"></iframe>
<iframe src="page10.svg"></iframe>
</div>
</body>
</html>
I suspect it is a bug in Chromium because I experience it not only in Chrome Mobile but in applications built with Crosswalk. Does anyone know how to overcome this problem or is it indeed a browser bug?
I'm trying to iframe this site http://interimincomemodel.com/reps/eugeny/fastsuccess/ into this one http://interimincomemodel.info/fastsuccess/
When I open index.htm on my PC with IE11 the iframe just looks like the original site.
But when I upload it on the server, the background is messed up in IE11: background image is not fit to screen, headlines are not highlighted, email boxes are not rounded.
Also when trying to iframe this website
interimincomemodel.com/reps/eugeny/
into
interimincomemodel.info
the video player controls bar in the iframe is much larger and the last button "play full screen" goes outwards and can't be clicked. It happens in every browser.
I'm using this code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Interim Income Model</title>
<style media="screen" type="text/css">
body {
margin: 0;
padding 0;
overflow:hidden
}
</style>
</head>
<body>
<iframe src="http://interimincomemodel.com/reps/eugeny/" style="border:0px #FFFFFF none;" name="myiFrame" scrolling="auto" frameborder="0" marginheight="9px" marginwidth="100%" height="100%" width="100%"></iframe>
</body>
</html>
What can be causing the issues?
Thanks
I have an iframe to display the content of a .htm file, which is present in another location. The document loads perfectly while on a desktop browser.
But while on a mobile version, the content of the document is not displayed completely.
I am looking for a responsive iframe for both mobile and desktop views.
HTML
<iframe
id="ifrm"
src="URL.htm"
width="100%"
frameborder="0"
scrolling="no"
height="1450px"
style="padding-top: 0px; float: left;" target="_blank"
/>
I referred these links, but unfortunately they didn't help:
Full-screen iframe with a height of 100%
Scale iFrame css width 100% like an image
Demo with bootstrap website in iframe
Make sure you have
<meta name="viewport" content="width=device-width, initial-scale=1" />
in <head> of your document.
Try like this LINK
HTML:
<div class="iframe">
<iframe src="http://a.rgbimg.com/cache1wZTwK/users/m/mi/micromoth/600/oIejAt8.jpg" frameborder="0"></iframe>
</div>
CSS:
.iframe {
position:relative;
}
iframe, object, embed {
max-width: 100%;
min-width: 100%;
}
This question already has answers here:
Blank iFrame in IE
(4 answers)
Closed 8 years ago.
My website seems to work in all browsers but IE 8. Everything loads fine by the iFrame.
Here is my HTML code:
<head>
<title> Title </title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="respond.min.js"></script>
</head>
<body>
<iframe src="http://instagram.com/p/cR5BORA8Ij/embed/"
width="300" height="400" frameborder="0"
scrolling="no" allowtransparency="true" id="myFrame"></iframe>
</body>
Any suggestions on what I could be doing wrong?
Here's a full breakdown:
Steps to Reproduce:
Create a page that has position:relative on the html element
<html style="position:relative">
<head></head>
<body>TEST</body>
</html>
Here's a test page in fiddle that does just that:
http://jsfiddle.net/KyleMit/DZbt5/show/light
Now use that page inside of an iFrame and open in IE8
<html>
<head></head>
<body>
<iframe src="http://jsfiddle.net/KyleMit/DZbt5/show/light/"></iframe>
</body>
</html>
Here's a fiddle that should work in all browsers EXCEPT IE8
Solution:
As the previous answer suggests, you can remove position:relative from the original html page, but you might not have access to the page or be able to change it.
Instead, you can simply add relative position to the iframe element itself:
iframe {
position: relative;
}
Working Demo in Fiddle - Also works in IE8
Other Instances
Question was also asked here:
iFrame content doesn't show in IE8
Blank iFrame in IE
From the question iFrame content doesn't show in IE8:
Just remove the following rule from the iframed content:
html { position: relative; }
I'm working on a project where I need to make a Flex application that fills the entire browser window (note that I mean that the toolbars should be visible and all that even if I say fullscreen).
To develop the SWF I'm using FlashDevelop (for the first time) and I'm stuck. When I build the project it displays no error and a file website.swf is generated. When I browse to this file with Firefox, it displays what I want and in fullscreen. However when I go to the generated index.html I get a white horizontal bar at the top of my screen (again the browser window).
I've looked around a bit on the internet and found several people suggesting that the CSS should include stuff like:
<style type="text/css">
html, body { margin:0; height:100%; overflow:hidden; }
body { margin:0; height:100%; width:100%;}
</style>
But that didn't cut it for me, I still have the white bar. I've tried margin, top, width, height and border so far, nothing seems to work.
Other tutorials show how to make an SWF fullscreen as in the Firefox F11 equivalent, which is not what I want (and it still displays the annoying white bar when I press F11 :().
EDIT: Additionally when I place an extra line above the "altContent" div that says "Blub", this line will be displayed in the white bar.
For completeness, the HTML, since I expect this to be the problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
var flashvars = {
};
var params = {
menu: "false",
scale: "noScale",
allowFullscreen: "true",
allowScriptAccess: "always",
bgcolor: "#FFFFFF"
};
var attributes = {
id:"Website"
};
swfobject.embedSWF("Website.swf", "altContent", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
<style type="text/css">
html, body { margin:0; height:100%; overflow:hidden; }
body { margin:0; height:100%; width:100%;}
</style>
</head>
<body>
<div id="altContent">
<h1>Website</h1>
<p>Alternative content</p>
<p><a href="http://www.adobe.com/go/getflashplayer"><img
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player" /></a></p>
</div>
</body>
</html>
The HTML and CSS look fine. I've just tested it with Firefox 3.6 and Flash Player 10.1 as well as the latest version (2.2) of swfobject. The displayed SWF fills the browser window completly. There's no white bar on top of the SWF.
Try upgrading to the latest version of swfobject in case you are still using an older version.
BTW: You can remove the second line of your CSS. That's redundant.