Iframe goes transparent when hovering over a mouseclick event.

[mstrass]

Brief description Iframe goes transparent when hovering over a mouseclick event in component extension. Happening with multiple users.

How to reproduce Create an app with a component. Add component to live stream. Component appears properly but when mouse is moved over iframe everything goes transparent. Items can still be clicked but are not visible. Appears fine in Twitch Rig.

Expected behavior On hover over iframe it should not go transparent.

(https://user-images.githubusercontent.com/48228083/83455471-ca61e000-a412-11ea-9faa-ed0458e4ebfb.gif)

Screenshots

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/%27) does not match the recipient window's origin ('https://www.twitch.tv/%27).

[BarryCarlyon]

A response was added here

https://discuss.dev.twitch.tv/t/iframe-appears-invisible/26078/2

Panel.bundle.js:1175 Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.

Is indicative of a issue in the browser, and the user operating the browser may have localStorage blocked or using a browser such as brave where it defaults to block localStorage, or any number of browser "privacy" plugins.

You need to catch this issue in code and advise the user localStorage is required or work around it.

[mstrass]

Hi there,

I am getting this error message which I think may actually be the issue.I believe this may be on your 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

[zzoizisoo]

Found same symptom, different condition:
My component extension gets invisible when the iframe width is smaller than a certain threshold(I guess 600px). I already made responsive stylesheets so it appears well on the smaller panel. but when it comes to component extension, it gets invisible when the screen size shrink which causes extension size shrink as well.
I've tested others too, and the same thing happened.