Here is the snippet that reflects my problem:
<!doctype html><html><head><style>
*{
box-sizing: border-box;
margin: 0; padding: 0;
border: 1px dotted #000000;
}
.myContainer{
text-align: center !important;
margin: 0 auto;
width: 200px !important;
height: 250px !important;
}
.myiframe{
border: none;
/*margin-top:-200px;*/
width: 400px !important;
height: 400px !important;
transform: scale(0.5,0.5); transform-origin: center bottom;
}</style></head><body><div class="myContainer"><iframe class="myiframe" src="" style="background: green;"></iframe><br>a text ...!</div></body></html>If scaling was omitted, the ifram was shown in its right place. I'm using FireFox 60. Is it a bug or I'm doing wrong?
I can manually displace the iframe by configuring margin-top, but the page I'm working on is dynamic, so I need automatic configuration of the iframes. Any help?
EDIT.
The ultimate goal is to let a user introduces an iframe, and assigns to it arbitrary width and height, beside an optional scale. Then the iframe should be scaled down or up by a compiler, and the final iframe shown (whih fits inside a wrapper that also includes a caption to the iframe at the bottom) should have the user-assigned width and height (not the scaled ones).
- One solution (which is shown in the snippet above) is to reversely scale the parent div (the wrapper), but it has the stated problem of misplacement. The solution to this misplacement should work with different widths and heights and scales.
- The other soultion is to stop defining width and height to the wrapper and let the browser decides for them. However, seemingly, the browser assumes the unscaled width and height of the iframe for choosing the proper width and height for the wrapper, which is not desirable at all. *isn't it a bug? why the wrapper doesn't follow the sizing of its content in this case? If it is intentionally, which seems to be so (as, e.g., the command
transform-originis apparently defined with this concept in mind), then how can I change this default behavior?
If you define width and height for the wrapper big enough in the 1st solution, the misplacement is solved, but then again the problem for the second solution arises.
As stated above, using margin-top can resolve the issue, but I needed an automatic solution that works for different user-defined widths, heigts, and scales.
Hope my problem is clear now. I have tried several formulas for margin-top but with no real success, every formula tried works for some set of (width,height,scale) and doesn't work as intended for the others.