Iframe not working properly in Iphones

Ionic Framework
1

Hey guys, I write this code in my HTML and CSS, it’s working flawlessly in Android devices but NOT IN iOS. Can anyone help me with my code?

HTML

<ion-content overflow-scroll="true">
    <div>
    <iframe src="https://linkhere.com" 
     allowfullscreen SameSite="None" secure></iframe>
    </div>

.iframe-container {
    overflow: hidden;
    padding-top: 500%;
    position: relative;
  }
   
  .iframe-container iframe {
     border: 0;
     height: 100%;
     left: 0;
     position: absolute;
     top: 0;
     width: 100%;
  }
   
  /* 4x3 Aspect Ratio */
  .iframe-container-4x3 {
    padding-top: 75%;
  }

  .iframe-error iframe {
    border: 0;
    height: 0%;
    left: 0;
    position: absolute;
    top: 0;
    width: 0%;
  }

Is there anything wrong with my code? It’s not fully displayed in iPhone but it works perfectly in android. Also, I can’t scroll in iPhone but android works nicely.

Please advise me what I did wrong with my iframe code, I need to change it to suit iPhone as I have a separate codebase for android and ios.

Thanks in advance!

iOS
iOS940×788 196 KB

2

Have you inspected things on iOS using safari dev tools?

Inspect the frame and see what css properties are messed up.

3

I tried debugging but when I press developer>my iPhone>my app, a window pops out which is the dev tools, suddenly few seconds it disappears again and I can’t find it.