Why is my iframe not scrolling properly after importance is applied to overflow-y CSS

Question

After adding overflow-y: scroll !important to the iframe's css, I am still unable to achieve the y-axis scrollbar feature. It's a major problem due to a form within the iframe which cannot be completed due to its contents being cut off.

HTML

<div style="display: none;" id="io-iframe"><iframe scrolling="yes" src="..." frameborder="no" height="2000px"></iframe></div>

CSS

   iframe {
        display: block;
        height: 2000px;  
        width: 100vw; 
        border: none;
        overflow-y: scroll !important;
        overflow: auto !important;
    }

@media all and (min-width:320px) and (max-width: 480px) {
    iframe {
        height: 500vh;  
    }
}

When inspecting the page, I see there's scrolling="no" and style="overflow: hidden" and I have no clue how it's getting appended and if it's the reason why the scrolling functionality isn't working. (https://i.stack.imgur.com/xeoWQ.jpg)

Answer 1

It looks like at least part of the problem is that you're applying some relatively large heights to the iframe itself. When the iframe itself is quite large you could run into the issue that you're scrolling the parent page rather than the iframe itself particularly if its scrollbars are obscured.

Some recommendations:

1. Avoid setting large fixed heights on the iframe, particularly if you do not control its contents.
2. Ennsure you avoid the scrolling="no" attribute on the iframe. The default value is "yes" so omitting the attribute is all that's needed.

iframe {
  box-sizing: border-box;
  /* 
    These values are 90vh / vw here so it'll
    work in the stackoverflow code snippet runner,
    when you control the page, you can make these 100
  */
  height: 90vh;
  width: 90vw;
  border: 3px dashed red;
}

<iframe src="https://jvdl.dev/stackoverflow/78104983.html" />