Iframe appears invisible

Extensions
1

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)
at h.emit (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)
at handleMessageEvent (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/’) does not match the recipient window’s origin ('https://www.twitch.tv/’).

2

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?

3

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.

4

You might have a “privacy” extension interfering or have localstorage completely disabled.

You as an extension dev need to handle this possibility.

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 :smiley:

5

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”.

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

Hope that these are good leads.

6

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:

setTimeout(() => { ReactDOM.render( <App />, document.getElementById('root')) }, 1)
7

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.