CODEWITHSUNDEEP
javascriptreactjsiframe
Akash
Akash

Reputation: 838

Bug: React does not recognize the allowTransparency prop on a DOM element

I'm using an iframe:

<iframe
    width="100%"
    height="100%"
    frameBorder="0"
    title="Spline 3D Animation"
    allowTransparency={true}
    style={{ backgroundColor: "transparent" }}
    src="https://my.spline.design/portfolio-fe0fd4b29cba7bfea175804f995a9f8a/">
</iframe>

The console shows:

Warning: React does not recognize the `allowTransparency` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `allowtransparency` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

React version: ^17.0.2

Link to code example: The entire code for this is here https://github.com/akashshyamdev/portfolio-latest/blob/master/src/containers/Home/Hero.tsx

The current behavior

Screenshot 2021-09-04 at 09 39 00

The expected behavior

I expect the black background to be transparent

Upvotes: 5

Views: 3320

Answers (2)

Micael Mota
Micael Mota

Reputation: 580

Short answer: Just remove this property and have fun.

Explanation:

I'm having the same issue with React and Typescript. The problem is that the property allowTransparency is typed in @types/react, but it's no longer supported in React - it was removed in 2017.

@types/react is an independent project https://github.com/DefinitelyTyped/DefinitelyTyped and someone has already tried to merge a PR removing this property but it was not merged.

nhunzaker, the guy who removed this property from React with this PR said:

"allowtransparency is an Internet Explorer-only attribute that controls the background transparency of an iFrame. When set to true, it respects the background color of the iFrame. When set to false, it sets the background color to that of the document."

Nobody is really using Internet Explorer these days, so I'm just removing it.

If you still need to support IE, you can try using @ts-ignore.

I hope it helps, good luck!

enter image description here

Upvotes: 4

windmaomao
windmaomao

Reputation: 7680

If allowtransparency, or allowTransparency or anything doesn't work, you still can try with CSS.

iframe {
    background-color: transparent;
}

Upvotes: 2

Related Questions