Iframe Size Issue on Firefox

Question

I have an iframe inside a list(I'm using a slider), and on Chrome sets its size perfectly, but on Firefox, it has a smaller size.

It's like this

<ul id="slider">
    <li><iframe src="slider1-mobile.htm" style="width:320px; height:250px;"></iframe></li>
    <li><iframe src="slider2-mobile.htm" style="width:320px; height:250px;"></iframe></li>
    <li><iframe src="slider3-mobile.htm" style="width:320px; height:250px;"></iframe></li>
    <li><iframe src="slider4-mobile.htm" style="width:320px; height:250px;"></iframe></li>
</ul>

With Firebug I can see that every li element have a size of 320x250 as stated on the css... but the iframe switches to width and height to 100%, even if I put it inline with the style attribute that I want them to be 320... anyways, even if it were to 100%, as the parent(the <li> ) has a size of 320x250, the iframe having width to 100% should have a width of 320, as the 100% of 320 is 320.

But it shows the iframe really small, not the size it should be. On Chrome I can view it perfectly.

You can see it on: http://samlizama.com/Responsive/

I appreciate any help given :)

Here's how it looks on Chrome and Firefox:

Chrome

Firefox

With the same code

Answer 1

You problem is this CSS rule in main320.css:

#slider iframe{
  transform: scale(0.5);
  width:320px;
  height:250px;
}

Firefox supports unprefixed CSS transforms, so this scales the iframe down by a factor of 2. Chrome only supports -webkit-transform , so ignores the transform rule.

Answer 2

In Firefox for Mac looks good!