Twitch Chat Embed broke "hover"

API
1

I have really strange problem with embedded Twitch Chat. If I have Twitch Chat window in iframe, after some time or after some action with chat (click, select text, scroll) somehow “hover” effects are broken on whole page (cursor: pointer are changed to default instantly on move, I cannot see any html TITLE value on hover). Here is example code. I tried to run it in jsfiddle but it isn’t possible to run Twitch Chat iframe in iframe.

<!doctype html>
<html lang="en">
<head>
    <title>twitch</title>
    <style>
        .hover {
            width: 200px;
            height: 100px;
            background: red;
            cursor: pointer;
            margin-bottom: 50px;
        }
        .hover:hover {
            background: blue;
        }
    </style>
</head>
<body>
<div class="hover" title="hover">Hover me</div>
<div class="twitch">
    <iframe src="https://www.twitch.tv/lirik/chat?darkpopout=" width="300" height="300" frameborder="0" scrolling="no" title="Twitch Chat"></iframe>
</div>
</body>
</html>

Here is live demo of this code: LIVE DEMO

And here is gif showing what am I talking about: GIF WITH PROBLEM

Please tell me how to override this to have working cursor: pointer and see html titles without problems on hover.

2

I can’t reproduce this in a few minutes using a busy chat and that html. How’s your CPU usage when it happens? (shift+esc in Chrome on Windows to bring up Chrome’s task manager)

3

Hi 3ventic, thanks for interesting with my problem. Here you have gif with completely clear installation of chrome and Task Manager details. I have i7 CPU so I don’t think it’s CPU problem, generally I can have even three or more streams played and everything works great, but when I embed chat, probably its some js/css is broking something.
Here is GIF: DETAILED GIF

EDIT: I have found that deleting application.css from iframe in dev tools fixes problem, but it is very hard to find what is wrong in so big css

4

If something in the iframe is actually messing with behavior of the parent document, that’s a violation of cross-origin protections and a bug in the browser. FWIW I still can’t reproduce it on Chrome 64.

5

I have found that it is problem of style img {max-width: 100%} if you have bar with most popular cheer. Overriding it fixed problem partially, because now as I noticed only moment when mouse is losing hover is moment of new message on chat. Unfortunatelly it’s for me almost impossible to debug JS of Twitch to find it. Additionally as I noticed on firefox problem doesn’t exist. Do you maybe know which js script is responsible for action at new message?

6

I had the same problem in Chrome 63 but updating to 64 solved the problem. However I still got the cursor getting back to default if I write in the chat while hovering an element.

7

Unfortunatelly I didn’t notice any change in new Chrome - problem still exists. Every new message on chat break mouse title hover.

8

I can confirm messages still break it. It doesn’t blink anymore by itself tho.

9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.