How to set a transparent background on an iframe
No matter what I do I keep ending up with a white background on this iframe. I have tried removing all the elements from it and setting
background: transparent on the <html> tag. and the <iframe> itself. I tried allowTransparency but react 18 says it does not recognize this property. At this point all the google links are purple. Has anyone done this before?48 Replies
what is the iframe? link?
sorry. didnt get the notification
its in my local development env
i can replicate it with an empty iframe that has
background-color: transparent
im trying to play around with it in the dev console and nothing is making it tranparent
are there any other styles applied to it from another stylesheet or anything?
i dont think so. and even if there were wouldnt
element.style override it?
im not sure of everything thats in the tailwind reset
i could check therenot necessarily (inline styles can be overridden by
!important, for example)
you can view computed styles in your dev toolsyeah theres nothing on any of them
i checked there
oh but this is interesting
just double checked
the computed body style isnt getting the transparent color
if you just do something like
background: red does it pick that up?red on the iframe does nothing....
put it on the body and give the body a size maybe
but if it's not picking up any inline styles then I'm not sure what's going on... just playing with this in a codepen I can make the background of the iframe transparent but idk if that's transferable haven't worked too much with iframes tbh
body fills the html. setting red on the html works
link?
I know they usually supply their own styles because you can't reach across the iframe boundary from the parent document or w/e
but these are just inline styles within the iframe
I closed out the codepen, but it was as simple as it gets
you can see it taking up the expected dimensions with and without the background
but it's hard to test an actual iframe thing out in codepen where there's a proper src
well right now im just doing it with an empty iframe with no src
so it autofills with an empty html, head, and bosy
same as what I had in my codepen
on top of those styles it was just an empty iframe inside the HTML part of codepen
seemed to work with and without allowtransparency
hmmmmmm
ok. im just gunna delete all the html and build i back up till it works
aha! so the cullprit is the
<CssBaseline enableColorScheme /> from mui
but i dont know how its changing anything and why none of the overrides are workinggood idea!
but if i remove it, everything works
I'm not familiar with MUI or
color-scheme, but after doing just a tiny bit of reading here... I wonder what your computer is set to
do you have prefer dark mode or anything like that set on your computer?i do have the desktop set to dark moed
I wonder if your page is getting the color scheme for preferring dark mode, and the iframe doesn't because it can't be affected by page styles
so it's defaulting to light mode preference?
wild shot in the dark after doing literally less than a minute of reading about this stuff... so please take with a grain of salt
yeah.... kinda makes sense....
but it doesn't explain why your overrides aren't working in either case
so idk if it's the answer
but that still doesnt explain why it doesnt go away when i set the colors manually
yeah exactly
im literally so confused
are you able to see this
yeah
I recreated that really minimal example I was talking about earlier, and here you can see that if you remove the white background color the iframe has a transparent background
it doesn't show up in the computed styles but that does seem to be what's happening
yes. yours works fine
at this point i can literally just remove that one line of code and it fixes the problem
but it makes other problems
can you share your source code
I'm curious now and wanna figure this out lol
i could but its kind of a big project and i just dont want to get lost in it
but i can if you'd like
ive been working on it for a long time
up to you I was thinking just a snippet here
but idk if that's possible
yeah the problem is its just not snippetable but
if you want
yeah fair
you should be able to do it pretty quick
maybe worth posting an issue on MUI
you should just be able to create-t3-app
and then install mui
and then throw out everything and just make _app.tsx return a div with
<div><CssBaseline /><iframe /></div>
i think that should do itokay I can test it out tomorrow
if I figure anything out I'll get back to you
np. i appreciate you talking to me
my curiosity is piqued 😄
yeah absolutely
im gunna see if i can figure it out
i was staring at this for literally 2 hours
yeah this is a bit of a headscratcher for sure
good luck 🫡
tyvm
have a good night
thanks you too 🙂
figured it out.... close to what you thought
and i still dont completely get it, but the iframe's html needs to have color-scheme: dark
idky not having it --> white and having it --> tansparent
but it works now
yeah, that's kinda odd... i'd expect no color-scheme -> user agent styles -> default white background color but it still doesn't explain why it wasn't able to be overwritten
glad you figured it out though 🙂
appreciate the help
thanks again