# Iframe appears invisible **URL:** \ **Category:** Extensions\ **Created:** [June 2, 2020, 9:21pm UTC](https://staging-discuss.dev.twitch.com/t/iframe-appears-invisible/26078 "2020-06-02T21:21:25Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![mstrass](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/mstrass/32/11297_2.png) [@mstrass](https://staging-discuss.dev.twitch.com/u/mstrass)\ **Post date:** [June 2, 2020, 9:21pm UTC](https://staging-discuss.dev.twitch.com/t/iframe-appears-invisible/26078/1 "2020-06-02T21:21:25Z")
**Brief description** Iframe goes transparent when hovering over a mouseclick event in component extension. **How to reproduce** Create an app with a component. Add component to live stream. Appears fine in Twitch Rig. Component appears properly but when mouse is moved over iframe everything goes transparent. Items can still be clicked but are not visible. **Expected behavior** On hover over iframe it should not go transparent. **Additional context or questions** Panel.bundle.js:1175 Uncaught DOMException: Failed to read the ‘localStorage’ property from ‘Window’: Access is denied for this document. at h. ([https://l9txfxv81qkjzxokdoee0wu4anpnzb.ext-twitch.tv/l9txfxv81qkjzxokdoee0wu4anpnzb/1.3.4/de7ee1c4c4e355b948448aecc0d2ff13/Panel.bundle.js:1175:41](https://l9txfxv81qkjzxokdoee0wu4anpnzb.ext-twitch.tv/l9txfxv81qkjzxokdoee0wu4anpnzb/1.3.4/de7ee1c4c4e355b948448aecc0d2ff13/Panel.bundle.js:1175:41)) at h.emit ([https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js:8:4080](https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js:8:4080)) at e.onAuthReceived ([https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js:30:58923](https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js:30:58923)) at handleMessageEvent ([https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js:30:55164](https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js:30:55164)) vendor-05a40961ce2a72faa556.js:1 Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided ('[https://supervisor.ext-twitch.tv/’](https://supervisor.ext-twitch.tv/%27)) does not match the recipient window’s origin ('[https://www.twitch.tv/’](https://www.twitch.tv/%27)). ---
**Author:** ![BarryCarlyon](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://staging-discuss.dev.twitch.com/u/BarryCarlyon)\ **Post date:** [June 2, 2020, 9:24pm UTC](https://staging-discuss.dev.twitch.com/t/iframe-appears-invisible/26078/2 "2020-06-02T21:24:07Z")
> [@mstrass](#): > > Panel.bundle.js:1175 Uncaught DOMException: Failed to read the ‘localStorage’ property from ‘Window’: Access is denied for this document. That looks like a problem your side, you are not catching the fail to read/use localstorage. This can happen with the browser brave, whoms default behaviour is to block localstorage. What browser are you using? ---
**Author:** ![mstrass](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/mstrass/32/11297_2.png) [@mstrass](https://staging-discuss.dev.twitch.com/u/mstrass)\ **Post date:** [June 2, 2020, 9:43pm UTC](https://staging-discuss.dev.twitch.com/t/iframe-appears-invisible/26078/3 "2020-06-02T21:43:47Z")
It is happening on Chrome. Works fine on Firefox and my buddy uses Brave and said it works. I’m a newer programmer so it definitely could be an issue on my side. ---
**Author:** ![BarryCarlyon](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://staging-discuss.dev.twitch.com/u/BarryCarlyon)\ **Post date:** [June 2, 2020, 9:46pm UTC](https://staging-discuss.dev.twitch.com/t/iframe-appears-invisible/26078/4 "2020-06-02T21:46:50Z")
You might have a “privacy” extension interfering or have localstorage completely disabled. You as an extension dev need to handle this possibility. > [@mstrass](#): > > my buddy uses Brave and said it works. I have the converse from my brave users, current solution for them at the moment is “this is sooooo basic why is it disabled” and I don’t catch the issue, it’s pending a fix in said extension 😃 ---
**Author:** ![mstrass](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/mstrass/32/11297_2.png) [@mstrass](https://staging-discuss.dev.twitch.com/u/mstrass)\ **Post date:** [June 5, 2020, 6:36pm UTC](https://staging-discuss.dev.twitch.com/t/iframe-appears-invisible/26078/5 "2020-06-05T18:36:40Z")
Just a quick follow up question. I posted this in the bug report also. I am getting this error message which I think may actually be the issue.I believe this may be on Twitch’s side. Resource interpreted as Document but transferred with MIME type image/gif: “[https://s.amazon-adsystem.com/iui3?pid=a30f442a-e833-4300-a302-987199caf562](https://s.amazon-adsystem.com/iui3?pid=a30f442a-e833-4300-a302-987199caf562)”. ![](https://d2spem0quai2ol.cloudfront.net/original/2X/c/cd3f8287abe3b9a3f1593aa8473cf6d2eca028ab.png) This is the location: webpack:///./src/utils/tracking.ts Also I noticed that if you remove the transform option in element.style it will reappear temporarily: ![Error2](https://d2spem0quai2ol.cloudfront.net/original/2X/7/7f858eb21a1c5035dcda386fc7147fc7f6ab788b.gif) Hope that these are good leads. ---
**Author:** ![TeazYou](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/teazyou/32/14167_2.png) [@TeazYou](https://staging-discuss.dev.twitch.com/u/TeazYou)\ **Post date:** [October 25, 2021, 12:42pm UTC](https://staging-discuss.dev.twitch.com/t/iframe-appears-invisible/26078/6 "2021-10-25T12:42:43Z")
I used to had the problem on Firefox while Chrome was working fine. I solved it by adding a timeout to my React component render, something like this: ```auto setTimeout(() => { ReactDOM.render( , document.getElementById('root')) }, 1) ``` ---
**Author:** ![Dist](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/dist/32/7192_2.png) [@Dist](https://staging-discuss.dev.twitch.com/u/Dist)\ **Post date:** [October 25, 2021, 12:53pm UTC](https://staging-discuss.dev.twitch.com/t/iframe-appears-invisible/26078/7 "2021-10-25T12:53:26Z")
First, there’s no need to bump a thread that’s over a year old. Secondly, rather than use that workaround to delay React attempting to render the better option would be to read introductory guides for React that show how to appropriately place scripts so that they don’t attempt to render before the DOM has finished loading. If you need to use a workout such as a setTimeout then that likely indicates you’ve placed your script in the wrong place.