Workaround for Safari iframe webkit scaling bug?
There seems to be a webkit scaling bug impacting Safari for Windows (v5.1) and both Safari/Chrome for Mac. When you create an iframe and use the CSS tag -webkit-transform with a 'scale' value less than 1 (say, 0.5), elements of the page are missing when it renders the scaled version of the page.
I've built the smallest test page I can to illustrate the issue:
<html>
<head>
<title>iframe webkit scale bug</title>
<style type="text/css">
iframe.preview
{
width: 1024px;
height: 768px;
border: 1px solid black;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;
}
</style>
</head>
<body>
<iframe class="preview" src="http://www.google.com/"></iframe>
</body>
</html>
As a new user to stackoverflow apparently I'm not yet allowed to attach screenshots to this post. But I had 'em and was willing to share! :)
Imagine if you will, a screenshot from Chrome (success case, s开发者_JAVA技巧ee the [I'm Feeling Lucky] button, as well as some links at the bottom... everything rendered OK at 50% scale).
Now imagine a screenshot from Safari (failure case, missing [I'm Feeling Lucky] button, no links at the bottom... many page elements missing).
This happens consistently for all sorts of pages brought into the iframe; elements just go missing. It also seems to happen whether or not you have a wrapper div around the iframe and constrain its dimensions (that was one workaround I tried).
Any ideas?
The Safari update yesterday (10/12/2011) fixes this bug. Woot.
加载中,请稍侯......
精彩评论