Menu
I would like to scale an iframe on mobile safari.
I am including an iframe inside a div.
<html>
<body>
<div id="iframe_container">
<iframe src="http://jsfiddle.net/viebel/kTzDS/show" style="width:300px;height:300px;"/>
</div>
</body>
</html>
Now I am scaling the div with this code:
$(function() {
$('#iframe_container').css({
'-webkit-transform': 'scale(0.7)',
'-webkit-transform-origin': '0 0 '
});
});
On iOS/Safari, the iframe is cut (i.e. can't be entirely seen) while on desktop/chrome, the iframe is not cut.
Here is a jsfiddle page with the code: http://jsfiddle.net/viebel/tJQUH/
Just to clarify: here is a demo page that demonstrates the real problem - when opened on iPad/iPhone Safari - all the three lines should be of the same size: http://jsfiddle.net/viebel/tJQUH/show
Please advice what can I do to see the iframe on Mobile Safari completely uncut?
254
Why Safari doesn't allow to store cookie for iFrame? Answer: A: Answer: A: Try going to Safari/Preferences/Privacy and uncheck Prevent cross-site tracking.
See full reference on MDN Web Docs. 1 Safari has a bug that prevents iframes from loading if the iframe element was hidden when added to the page.
iframes used to be scrollable on the iPad using two fingers. This functionality was removed in an update a few months ago. iframes don't respect overflow on iPad, and require an additional container surrounding the iframe with overflow:hidden.
I have made few changes.Especially make the frame-size as 100%. Then try to scale the iframe itself.Check this out
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by viebel</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<script>
$(document).ready(function()
{
//alert('hai');
$('#ifd').css({
'-webkit-transform': 'scale(1.1)',
'-webkit-transform-origin': '0 0',
'width': '100%',
'height': '100%'
});
});
</script>
</head>
<body>
<div id="iframe_container" style="width:500px;height:400px;border:1px solid black;">
<iframe src="http://jsfiddle.net/viebel/kTzDS/show" id="ifd" />
</div>
</body>
</html>
Link to jsfiddle: http://jsfiddle.net/viebel/tJQUH/13
199
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
