1234933 - Popup bubble continuously blinks on/off, if you hover the few pixels above Twitter's retweets/likes profile-photos on a Tweet

Status: NEW

(Core :: Layout, defect)

Description

[Daniel Holbert [:dholbert]]

STR:
 1. Visit https://twitter.com/NickBaumann/status/679764879918632960
 2. Hover the white space just above any of the small photos to the right of "Retweets"/"Likes"

ACTUAL RESULTS:
The twitter handle associated with the photo appears in a popup-bubble. Then, the bubble disappears, and reappears, and disappears, and reappears, forever.

EXPECTED RESULTS:
Some steady-state (bubble stays open or stays closed). Probably the intent is that the bubble stays open.

I get EXPECTED RESULTS in Chrome and Edge.
I get ACTUAL RESULTS in Firefox Nightly 46.0a1 (2015-12-23) and Firefox 43 release on Ubuntu 15.10

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screencast of bug

Comment 2

[Desigan Chinniah [:cyberdees] [:dees] [London - GMT]]

(In reply to Daniel Holbert [:dholbert] from comment #1)
> Created attachment 8701602 [details]
> screencast of bug

This still seems re-producible, right :dholbert? 
Is it potentially something to be fixed on the Twitter end, :miketaylr?

Comment 3

[Daniel Holbert [:dholbert]]

(In reply to Desigan Chinniah [:cyberdees] [:dees] [London - GMT] from comment #2)
> This still seems re-producible, right :dholbert? 

Yes.

Comment 4

[Mike Taylor [:miketaylr]]

I'm not sure if this is something that Twitter should fix or we should fix -- the issue seems to be that we're firing multiple mouseenter and mouseleave events when the cursor switches between pointer and grabber as the tooltip opens, and then hides when we switch cursors -- presumably because we're firing mouseleave then. Not 100% sure why we're doing the cursor switching, maybe the tooltip padding/margin causes this?

Note that if you trigger the tooltip from below the image, there's no flickering.

The code in question is in https://abs.twimg.com/c/swift/en/init.43e5482848b6e528e9b3add5ae84edd3a840c59d.js, and a related bug was filed/patch written for Bootstrap.js tooltips.... 2.5 years ago: https://github.com/twbs/bootstrap/pull/14273

Comment 5

[Mike Taylor [:miketaylr]]

(better link for event handling/tooltip code in question: https://gist.github.com/miketaylr/d21938f32f03959e8d2902cb4e4f24a5)

Comment 6

[Mike Taylor [:miketaylr]]

Hang on, I think we're really dealing with mouseover and mouseout events. jQuery maps mouseenter/leave to those:

jQuery.each({
  mouseenter: "mouseover",
  mouseleave: "mouseout",
  pointerenter: "pointerover",
  pointerleave: "pointerout"
}

Let me see if I can reduce something.

Comment 7

[Mike Taylor [:miketaylr]]

Attachment: test-case.html

To reproduce:

1) open test-case.html
2) stick cursor in top part of the padding of the image (just a pixel or so below top outline)

Expected:
tool tip shows once, like in Chrome

Actual:
tool tip shows and hides and shows and hides...ad infinitum.

Comment 8

[Mike Taylor [:miketaylr]]

Andrew, given this is a mouse event thing (see Comment #4 and below), presumably, should this live in DOM?

Comment 9

[Andrew Overholt [:overholt]]

Seems like it. Thanks for the reduced test case! Maybe Stone or Olli know what's up here.

Comment 10

[Olli Pettay [:smaug][[e-mail]]]

Initial guess is that this happens because Gecko traditionally has supported "synthetic" mouse events so that cursors and such are updated properly when one for example scrolls a web page without moving mouse.

Comment 11

[Ming-Chou Shih [:stone]]

Tested the attached test case and found comment 10 is exactly the cause of this problem.
1. Mouse hover on the link triggers a mouseover event to the link. The js handler changes the div's display to block and induces reflow
2. After reflow, we synthesize a mouse move event which generates a mouseout event to the link (the mouse is no longer hover on the link after reflow)
3. The mouseout handler of the link changes the div's display to none and induce reflow again
4. After reflow, we synthesize a mouse move event which generates a mouseover event to the link (the mouse is hover on the link again)

Comment 12

[Olli Pettay [:smaug][[e-mail]]]

dbaron, IIRC, you've done some work related to synthetic mouse event dispatch.
Do you have opinion whether we should remove that event or what?

->Layout since it is layout code which decides to dispatch the event.

Comment 13

[Olli Pettay [:smaug][[e-mail]]]

Or mats, perhaps you have some opinion on this? This is really up to the layout to decide whether to dispatch synthetic events.

Edge doesn't seem to change hover state when scrolling using keyboard and keeping cursor untouched.
Chrome does change hover, as does FF.

In the twitter case nothing is scrolled, but only layout changed. In Chrome I do get occasional show/hide/show for the popup/tooltip, but in FF it keeps going.

Comment 14

[Mats Palmgren (inactive)]

I tend to think we're handling the testcase correctly and that it's
a bug in Chrome that they handle it differently.

IOW, this is something that the web developers of the site should fix.

Comment 15

[Sylvestre Ledru [:Sylvestre]]

Clearly ni on Jet as he no longer works at Mozilla.

Comment 17

[BugBot [:suhaib / :marco/ :calixte]]

Clear a needinfo that is pending on an inactive user.

Inactive users most likely will not respond; if the missing information is essential and cannot be collected another way, the bug maybe should be closed as INCOMPLETE.

For more information, please visit BugBot documentation.