{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 老娘就宠你 的问题《iframe CSS3 scaling issue on iPad Safari (iOS 5.0.》','https://www.manongdao.com/q-762605.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I need to scale up an iframe to make it bigger (I have no control over the source code of the iframe's content). I'm trying to achieve it via the -webkit-transform: scale(1.3) CSS property.
The iframe's content is scaled up correctly, but when I try to touch any of the controls in the iframe, then it seems that the touch event is being received at the wrong location (I can see that the control's "shadow" is highlighted at the wrong place upon touch). Therefore event handlers are not working (I suspect they aren't getting called, because the touch is detected at the wrong place). Has anybody encountered this issue? Can it be resolved?
I've created a test case that produces the problem (try it in iPad Safari): http://jsfiddle.net/9vem2/
Source in a more readable format:
Parent page (the container of the iframe):
<!DOCTYPE html>
<html>
<head>
<title>Parent</title>
<style type="text/css">
iframe
{
left: 200px;
-webkit-transform: scale(1.3);
}
</style>
</head>
<body>
<h2>Parent</h2>
<iframe src="child.html"></iframe>
</body>
</html>
Child page (iframe content):
<!DOCTYPE html>
<html>
<head>
<title>Child</title>
</head>
<body>
<h2>Child</h2>
<input type="text"></input>
<button onclick="alert('hello');">Button</button>
</body>
</html>
This feels like a hacky solution but as it's fixing what appears to be a bug, I suppose it doesn't matter. Rather than scaling in 2D, I have moved the iframe in 3D, toward the viewer, see this demo: http://jsfiddle.net/ianlunn/MSUmS/
The
<body>is made into a 3D space, like so:Then the iframe is moved toward the viewer along the Z axis in that 3D space:
This may need modification for a real-world application, especially if the iframe is wrapped in something other than the
<body>.The are some bugs on iframe implementation on iOS 5 as you can see in Phonegap Iframe Usage , even if you are not using phonegap you can find useful tips because is HTMS/JS/CSS based. I cite the last paragraph of that document:
Also have you tried a Javascript solutions I think is posible to inject CSS files to the HTML on the iframe from the parent window, because finally it's all loaded in DOM
what may be easier is making the iFrame responsive so if the browser resizes, so does the content that is responsive...This might fix it because scale seems to just scale the frame and not re-adjust content within.
http://jsfiddle.net/D2uBW/
Let me know how close I am to what you are looking for and please comment with any thoughts or fixes.