iFrame Not Loading IE 8 [duplicate] - html

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; }

Related

min-height style not working on button unless other style is present

In the following HTML, the min-height style property does nothing in (my versions of) Chrome and Safari on Mac, but does work in Firefox:
<html>
<head>
<style>
</style>
</head>
<body>
<button style='min-height:50px;'>
hello
</button>
</body>
</html>
I have also noticed that the min-height property takes effect in Chrome and Safari if some other unrelated property is added to the button, such as background-color:#abc;.
Is this some known webkit bug, possibly part of a larger class of bugs I should be aware of? Or not a bug at all?
Thanks!

It's working on my side. Please try with this
<html>
<head>
<style>
</style>
</head>
<body>
<button style='min-height:50px;display:inline-block'>
hello
</button>
</body>

html <object> being clipped although height=100%

I am using the following code to embed a pdf in a webpage:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<object data="http://fluencycontent-schoolwebsite.netdna-ssl.com/FileCluster/StGeorgesBritishInternational/Mainfolder/Admissions/1407-Application-Form_Admissions.pdf" type="application/pdf" width="100%" height="100%" internalinstanceid="26"><p>This browser does not support PDFs. Please download the PDF to view it: Download PDF.</p></object>
</body>
</html>
However the embedded document will be clipped as the height will be set to a value that wil clip the object. Forcing size in pixels will fix the problem. How is that?
Make you tests here as jsfiddle will fail to deal with <object>

The page itself needs a size assigned to it.
set the style appropriately for your page.
Try this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
*{height: 100%;width: 100%}
</style>
</head>
<body>
<object data="http://fluencycontent-schoolwebsite.netdna-ssl.com/FileCluster/StGeorgesBritishInternational/Mainfolder/Admissions/1407-Application-Form_Admissions.pdf" type="application/pdf" width="100%" height="100%" internalinstanceid="26"><p>This browser does not support PDFs. Please download the PDF to view it: Download PDF.</p></object>
</body>
</html>

SVG content is cut off when scrolling in Chrome Mobile

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?

Code inside <style> tags not working/showing up in Notepad++

<!DOCTYPE html>
<html>
<head>
<title>Earth Game</title>
This is the code below that is not showing up in Notepad++, any ideas why?
<style>
canvas {
position: absolute;
top: 0px;
left: 0px;
background: transparent;
}
</style>
Everything else is showing up as code, just the code above in the Style tags.
</head>
<body onload="init()">
<!-- The canvas for the panning background -->
<canvas id="background" width="600" height="360">
Your browser does not support canvas. Please try again with a different browser.
</canvas>
<script src="EarthGamejs"></script>
</body>
</html>
What it looks like :

Make sure the code isn't collapsed, to do so check on the left of your code in np++, you should see a small square with a plus sign inside it, try clicking on it.
Edit: Notepad++ doesn't support CSS highlighting in an HTML file. One option you have is to create a new css file, do what you have to do with the css and then paste it back in the html file.
Duplicate

Scrolling iframe on iOS is solved, BUT the iframe page display incomplete

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;