I'm in the process of resizing an iframe element on my webpage using a CSS media query to adjust its dimensions. However, when I scale it down and interact with the iframe, my webpage starts scrolling horizontally. The issue is evident when using Chrome, as shown in the fiddle link below:
https://jsfiddle.net/52tbt30j/2/
Here's the HTML code snippet:
<p>Before Iframe</p>
<iframe class="studyStackIframe" src="https://www.studystack.com/inewflashcard-1"
width="850" height="440" frameborder="0" scrolling="no"
style="background-color:pink;overflow:hidden"></iframe>
<p>After Iframe</p>
Below is the CSS (excluding vendor prefixed attributes):
@media all and (max-width: 875px){
* {
background-color: pink;
}
.studyStackIframe {
transform: scale(0.8, 0.8);
transform-origin: top left;
}
}
If you resize Chrome to make the page smaller and continue until the iframe fits snugly within the area, clicking on the red and green boxes will cause the page to scroll horizontally, cutting off part of the iframe content.
(There may also be issues with jQuery animation, but for now, my main focus is on resolving the scrolling problem.)