I'm using an iframe:

<iframe
    width="100%"
    height="100%"
    frameBorder="0"
    title="Spline 3D Animation"
    allowTransparency={true}
    style={{ backgroundColor: "transparent" }}
    src="/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 ponent, remove it from the DOM element.

React version: ^17.0.2

Link to code example: The entire code for this is here .tsx

The current behavior

The expected behavior

I expect the black background to be transparent

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 ponent, remove it from the DOM element.

React version: ^17.0.2

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

The current behavior

The expected behavior

I expect the black background to be transparent

• javascript
• reactjs
• iframe

Share Improve this question Follow edited Jan 11, 2023 at 12:27 snishalaka 1,93311 gold badge1111 silver badges1919 bronze badges asked Sep 4, 2021 at 10:41 AkashAkash 83822 gold badges1212 silver badges3131 bronze badges 6

• It is allowtransparency (note: lowercase) – Ploppy Commented Sep 4, 2021 at 10:58
• 2 No, because it is react, it must be allowTransparency – Akash Commented Sep 5, 2021 at 5:59
• No, you are wrong – Ploppy Commented Sep 5, 2021 at 7:09
• Well, not according to typescript. Typescript says that it should be "allowTransparency" – Akash Commented Sep 5, 2021 at 8:03
• 1 react props are camelcase while html attributes are lowercase. I'll stop here because this conversation is not going anywhere. – Ploppy Commented Sep 5, 2021 at 8:17

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 4

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./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!

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

iframe {
    background-color: transparent;
}