Html Question posted in
Some basic documentation can be found here.

Html – Iframe content causes the iframe to jump inside parent

This must be the most crazy html bug ever! How is it even possible that iframe content can affect the layout of the parent.
Please note that padding-top: 60px; should stay, as well as the width/height 170%; and bascaly the rest of the code should be as it is right now.

There is no reason for this jump to happen.

Again, the transform: scale(0.6) translate(-33.5%, -33.5%); is a crucial part of this code, and it must stay.

 <html><head><style>body, html { margin: 0; padding: 0; }
            ._inner_frame_ {
                margin: 0;
                width: 170%;
                height: 170%;
                transform: scale(0.6) translate(-33.5%, -33.5%);
                padding: 0;
                overflow:hidden;
                left:0; 
                position:absolute;
                background-color:red;
           
            }
            
            ._outer_
            {
    background-color:blue;
     width: 800px;
     height: 650px;
     overflow: hidden;
     position: absolute;
     top: 90px;
     left:90px;
     margin: 0;
     padding: 0;
     padding-top: 60px;
                 
            }
    
    </style>

    </head><body>
    
    <div class="_outer_">
    <iframe tabindex="-1" role="presentation" src="https://www.labuttiga.it/en" sandbox="allow-scripts allow-same-origin" referrerpolicy="origin" scrolling="no" class="_inner_frame_"></iframe>
    </div>
    </body></html>
Tags:

3

Answers


  1. 0

    I guess the issue is related to the way the browser handles scaling and positioning with iframes. When you use transform: scale(0.6) translate(-33.5%, -33.5%);, it applies a transformation to the iframe, and this could affect the positioning in an unexpected way.

    Please use this solution and let me know the status.

    <html>
<head>
  <style>
    body, html {
      margin: 0;
      padding: 0;
    }

    ._inner_frame_ {
      margin: 0;
      width: 1200px; 
      height: 975px; 
      overflow: hidden;
      position: absolute;
      background-color: red;
      top: -60px; 
      left: -60px; 
    }

    ._outer_ {
      background-color: blue;
      width: 800px;
      height: 650px;
      overflow: hidden;
      position: absolute;
      top: 90px;
      left: 90px;
      margin: 0;
      padding: 0;
      padding-top: 60px;
    }
  </style>
</head>
<body>
  <div class="_outer_">
    <iframe tabindex="-1" role="presentation" src="https://www.labuttiga.it/en" sandbox="allow-scripts allow-same-origin" referrerpolicy="origin" scrolling="no" class="_inner_frame_"></iframe>
  </div>
</body>
</html>

    Adjust the values as needed to fit your layout requirements.

    Login or Signup to reply.
  2. 0

    Move your iframe class ahead of your src= and the results render differently.

    <div class="_outer_">
  <iframe class="_inner_frame_"
        tabindex="-1"   
        role="presentation"
        src="https://www.labuttiga.it/en" 
        sandbox="allow-scripts allow-same-origin" 
        referrerpolicy="origin" 
        scrolling="no">
  </iframe>
</div>

    The embedded site has scripts that seem to be messing with the layout as it is rendered. I suspect that the sequence of events was letting the site control your layout before your class was applied.

    Is this working the way you intended?
    https://codepen.io/michaelleenheer/pen/eYXJLKo

    Login or Signup to reply.
  3. 0

    The web view response exactly according to your instruction. The height length given to iframe is on a high side, beyond the parent container. Reduce the iframe height to 160% or 165%.
    I hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search