Cannot create a IFrame with transparent Background in Ionic Framework

Ionic Framework Ionic React
1

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

1 Like
2

Did you find a fix for the problem?

3

I’m experiencing the same issue in Ionic Vue. For me it also works just fine outside of Ionic but within Ionic the background stays white and nothing I tried so far changed it.