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

[akashshyamdev]

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

The expected behavior

I expect the black background to be transparent

[hariombalhara]

@akashshyamdev See if this helps remarkablemark/html-react-parser#165

[eps1lon]

allowTransparency is an IE-only attribute which was removed in IE 9. You probalby want to set the background transparent with some CSS.

If you know what you're doing, you can use <iframe allowtransparency />

For more context, see #10823.