Bug 71626 - Flash is not positioned correctly when scaled inside an iframe tag.
Summary: Flash is not positioned correctly when scaled inside an iframe tag.
Status: RESOLVED DUPLICATE of bug 70553
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC Windows 7
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2011-11-06 05:21 PST by Gary
Modified: 2011-11-06 16:40 PST (History)
5 users (show)

See Also:


Attachments
JPEG image to show the problem found with the flash component. (52.95 KB, image/jpeg)
2011-11-06 05:24 PST, Gary
no flags Details
JPEG to show a working example using Firefox (45.80 KB, image/jpeg)
2011-11-06 16:40 PST, Gary
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Gary 2011-11-06 05:21:36 PST
I find the following to not display flash swf components properly when using the following CSS transform that is used by Safari and Chrome web browsers for Windows tested on Windows 7.  This problem is not seen when tested with IE9 or Firefox browswers.  They scale the webpage content correctly without any problem with flash components.

-webkit-transform: scale();


I have included the html code as part of the description.  The original website tested to load inside the iframe tag is required to see what it originally looks like.  
Here is the original website before it is scaled down:  http://www.alighthouse.com/bday91.htm
I have tested this problem with other websites that include flash components.

Here is the html code to duplicate the problem using Safari or Chrome:

++++++++++++++++CODE BEGIN++++++++++++++++++++++++++++++++++++++
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<META content="text/html; charset=UTF-8" http-equiv="content-type">
<META content="text/css" http-equiv="Content-Style-Type">

<title>WEBKITBUG::MyTEST</title>
<style type="text/css">
<!--
#flashloader {
    -webkit-transform: scale(.571,.746) ;
    border: solid #888 10px;
}
.flashwrapper {
	height: 560px; 
	width: 1050px;  
}
-->
</style>

</head>
<body>

<div class="flashwrapper" >
<iframe id="flashloader" allowtransparency="true" width="100%" height="100%" scrolling="yes" src="http://www.alighthouse.com/bday91.htm" frameborder="0" ></iframe>  
</div>
    
    
</BODY>
</HTML>
++++++++++++++++CODE END++++++++++++++++++++++++++++++++++++++++
Comment 1 Gary 2011-11-06 05:24:09 PST
Created attachment 113783 [details]
JPEG image to show the problem found with the flash component.

This jpeg image will show the problem that is seen when scaled.  Remove the CSS style transform to use the scale option and flash will work correctly.
Comment 2 Fady Samuel 2011-11-06 14:07:09 PST
I'm tracking this bug but I haven't gotten around to fixing it yet. I'll look into it today.

*** This bug has been marked as a duplicate of bug 70553 ***
Comment 3 Gary 2011-11-06 16:40:28 PST
Created attachment 113812 [details]
JPEG to show a working example using Firefox

This CSS scale option works correctly when viewed with Firefox.
Similar results are also seen using IE9.