Iframe won't scroll! It works fine in FireFox, Chrome, and IE

Question

Level 1

0 points

Iframe won't scroll! It works fine in FireFox, Chrome, and IE

I wrote a simple holder to display websites writen for phones on larger screens. In it I simply have an Iframe. This works great for FireFox, Chrome, and IE (although IE does not work well with HTML5). However on Safari instead of scrolling the Iframe expands. Below is my holder page.

I've been testing with an IPad 3.

Thanks for any advice.

Joel

<html>

<head>

<title>Phone Internet</title>

<!--

div.Title{font-family: Arial, Helvetica,sans-serif;font-size: 18px;}

div.Copy{font-family: Arial, Helvetica,sans-serif;font-size: 12px;}

#CellWindow{width: 320px;height: 480px;overflow:scroll}

-->

</style>

<!--

if (navigator.userAgent.indexOf('MSIE') > -1){alert("This page is best viewed with Chrome, FireFox and Safari. Other browsers may not display

// -->

</script>

</head>

<div align="center" class="Title">Mobile Phone HTML Examples</div>

</div>

<div align="center" class="Copy">©Joel Moses 2012</div>

<!--

document.getElementById("CellWindow").src = "http://www.zendisoft.com/mobile/index.htm";

document.getElementById("CellWindow").style.height="480px";

// -->

</script>

</body>

</html>

Thanks for the help.

iPad 2

Posted on May 3, 2012 8:55 PM

Reply

Answer 1

red_menace

Level 6

17,054 points

May 4, 2012 10:12 AM in response to joelmoses454

I don't see a <!DOCTYPE> declaration in there anywhere - this is an instruction to the web browser about what version of HTML you are using, so it is probably just getting confused (I can't tell either, as there are synax errors for transitional HTML 4.01/XHTML 1.0 and HTML5).

Reply

Answer 2

Sep 26, 2012 10:21 PM in response to joelmoses454

User csdco (https://github.com/fancyapps/fancyBox/issues/2#issuecomment-5997068) has provided a simple answer that solved the issue for me.

-----------------------------------

It's much easier to control overflowed divs than it is iframes, and the scrolling + blank content issues are working all the way back to iOS 4, where previously I wasn't even able to get the 2 finger scrolling to work (in iframes).

It goes something like this:

a-file.html:

<html>

<body>

...

</div>

</body>

</html>

Reply