Cannot create a IFrame with transparent Background in Ionic Framework

I am currently trying to create a website with Ionic Framework using React where I need to have a transparent iFrame inside the website. I have tried many ways and all result in a white background.

The issue seems to be in a way ionic Framework works because I have tried the same snippets in vanilla React and it worked as intentional.

I have tried everything from setting allowTransparency=“true” to changing the IFrame background to transparent but it doesn’t seem to work. Always resulting in a white background.

I tried with this small snippet

HTML

 <div className="container">
     <iframe className='iframe' allowTransparency src="about:blank"></iframe>
 </div>

CSS:

.container {
  background-color: red;
  padding: 300px;
}

.iframe {
  background: transparent;
  background-color: transparent;
  width: 50vw;
  height: 50vh;
}

Results:

  1. In the case of Vanilla (normal) React the background is the transparent and only the border of the frame is visible

  2. In the case of Ionic Framework with React the background remains white