debois/elm-mdl

Tooltips on components never close

Closed this issue · 7 comments

Quite simply put, tooltips on an MDL component, like a Button, never close. They'll open just fine, but then they're stuck.

This is demonstrated on the Live Demo site: https://debois.github.io/elm-mdl/#tooltips
(See the demo with the button that says "Click Me")

After the tooltip opens, you can even scroll the page, and the tooltip stays in the same location relative to the viewport.

Tested on Chrome 59 and Firefox idk some version

It closes for me when I scroll, however tooltip unreadable? o.O

image

@OvermindDL1 You're checking the demo with the button, correct? The others did work for me.

However, I also have the issue with blurred text; It only happens in Chrome, for me, Firefox is fine. I didn't report it here because I believe this is a known issue with Chrome, I recall seeing this issue reported on MDL's Github Repo.

You're checking the demo with the button, correct? The others did work for me.

Oh, you are right, it is just the one with the button broken, the tooltip gets stuck on and is absolute positioned on the screen even as you scroll.

This issue is resolved in the current wip demo that shows the progress in the new-v8 branch. Please report back if it is not resolved for you there, I only tested in Firefox.

Looks good now in that it vanishes, it is still entirely fuzzy though. ^.^;
Chrome: Version 58.0.3029.110 (Official Build) (64-bit)
Windows 10

image

@OvermindDL1 Like I mentioned, I don't think the blurriness is an Elm-MDL specific issue.

See google/material-design-lite#4574. They concluded that it's an issue with Chrome ~54, fixed in 55. But obviously we're still having the issue in Chrome 58. You can fix it with CSS by unsetting the will-change property on the tooltip. Interestingly, the official MDL site's tooltips no longer use the will-change property

@aforemny Reporting back -- I just tried using a tooltip on a Material.Button and the tooltip doesn't close!

Demo: https://ellie-app.com/qgtF5d3Vda1/2

Notice that the tooltip on the Icon is fine. Additionally, the example on the demo site does close correctly. (The button is the 4th example).

elm-mdl version 8.1.0 (latest on elm packages)
Tested on latest Chrome and Firefox.