Embedded Chat Obscured Bug

I am having some issues embedding twitch chat on my site - I am correctly loading the chat in the iframe with the following code

<iframe id="chat-container" src="https://www.twitch.tv/embed/[LOWERCASE CHANNEL NAME HERE]/chat?parent=subdomain.domain.com&darkpopout" />

However, any messages sent by the user do not show in any other chat (twitch website, or other viewer’s embedded chat). Moreover the broadcaster gets the message “Chatting is disabled for channel owner/mods because the Twitch Chat window is obscured by another element”. However, the iframe is added as a fixed position element, z-index above all others, within the body element directly. It is not obscured by any elements at all.

Is there something I am doing wrong? The channel name is all lowercase in the URL - the chat receives messages sent in the broadcaster chat on Twitch but not from any embedded chats. I can’t see any errors in browser console, or in network tab of chrome… hmm

[nameless] appears to be a dropdown menu.
That could be cusing rhe issue.

The “frame obscured” thing is very sensitive.

Could be any sort of div anywhere on the page that appears momentairly and disappears again. That will then trigger the protection

and if your CSS is slow loading and loads after the iframe, well then the z-index is added late after the protection has fired. Theres a great number of things it could be. Even more so when trying to make a iframe be as large as the page.

Bit I think the issue here is the drop down navigation