search

debois / elm-mdl

Elm-port of the Material Design Lite CSS/JS library
Apache License 2.0
965 stars 133 forks source link

Tooltips on components never close #336

Closed SidneyNemzer closed 7 years ago

SidneyNemzer commented 7 years ago

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

OvermindDL1 commented 7 years ago

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

image

SidneyNemzer commented 7 years ago

@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.

OvermindDL1 commented 7 years ago

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.

aforemny commented 7 years ago

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.

OvermindDL1 commented 7 years ago

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

SidneyNemzer commented 7 years ago

@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

SidneyNemzer commented 6 years ago

@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.