scrollIntoView/scrollTo when used inside iframe is not responding in IOS

I have an application thats displays on a website using iframe.

Please see this jsfiddle -> http://jsfiddle.net/7Leatwyu/

Here is also a stackblitz that has a similar code setup as my angular app https://stackblitz.com/edit/angular-c2dnea

Here youll see ive tried a few things like adding CSS styling to account for scrolling including:

position: absolute; 
top:0;left:0;right:0;bottom:0;
height:100%;overflow:auto;
width:100%;
background-color: white;z-index: 1000;
-webkit-overflow-scrolling: touch; <!-- This -->

When you answer a question or click the next button, it uses the code below to scrollTo the correct next question. As youll see - for every device aside from iPhone (IOS) it works. For IOS - it does not work.

scrollTo(el): void {
    const element = document.querySelector(`#${el}`)
    element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
  }

After this is called im expecting the window to scroll to the next question but it doesnt. Are there any work arounds out there? Ive been researching this for a week now and have tried many different javascript and CSS solutions that did not work.

Help..

from scrollIntoView/scrollTo when used inside iframe is not responding in IOS