search

google / material-design-lite

Material Design Components in HTML/CSS/JS
https://getmdl.io
Apache License 2.0
32.29k stars 5.03k forks source link

Radial action ripples appear for non-touch events #2033

Open kengruven opened 8 years ago

kengruven commented 8 years ago

MDL version: 1.0.6 Browsers: Safari 9.0.1, Firefox 43.0.1, probably others Operating system: Mac OS X Operating system version: 10.9.5 URL, if applicable: http://www.getmdl.io/components/index.html#toggles-section

What steps will reproduce the problem:

  1. Go to the toggles demo page
  2. Click any checkbox, radiobutton, or switch
  3. Watch for the "radial reaction"

What is the expected result? On desktop browsers (can we detect that?), no "radial reaction".

What happens instead of that? I see a "radial reaction" on all browsers.

Please provide any other information below, and attach a screenshot if possible.

At the bottom of this Material Design spec page, it says:

Use the outer radial reaction only on form factors that favor finger touch, where interaction may obstruct the element completely. For desktop usage with a mouse, you do not need this extra indication.

It's not entirely clear, but I assume this applies to all 3 toggles (checkbox, radiobutton, switch). In any case, it certainly applies to at least the "switch" control, where MDL displays it.

There's a nifty animation here (from #1723) that shows this happening.

It only happens when you click on the checkbox itself, not the label.

Interestingly, the Polymer project checkboxes call this the "ripple effect", and have an attribute "noink" to disable it.

The Material Design "Responsive Interaction" page calls it the Touch Ripple (capitalized), and says it "articulates the method and duration of a touch event".

jklmli commented 8 years ago

Happens on Chrome 48 as well. Please fix this!

jklmli commented 8 years ago

Clicking on the label also causes this now. mdl-js-ripple-effect seems to be permanently enabled, with no way to disable it.

Garbee commented 8 years ago

you do not need this extra indication.

The spec says you don't need it, meaning it is required. However it isn't banned from being used.

This isn't a bug. However appears more as a feature request for the option to disable rippling on non-touch events.

kengruven commented 8 years ago

But the sentence right before that in the spec says "Use the outer radial reaction only on form factors that favor finger touch".

The word "only" certainly sounds to me like it is not to be used in browsers that don't support touch events. What else could it mean?

I interpret the second sentence here, saying "you do not need this", to mean: the user does not benefit from this feedback on non-touch web browsers, which is why we disallow its use on such platforms.

Garbee commented 8 years ago

I think we could just change from click handlers to touchstart handlers.

We can't say "desktops never get ripples" since, they may very well support touch and that is what the user could be using.

laander commented 8 years ago

+1 At least provide a way to disable it (as they seem very buggy on both Chrome and Safari on my end)

markon1 commented 7 years ago

Any way to disable ripple effect? My code looks like this, and I can't find a way to disable ripple... `

        <span class="mdl-switch__label"></span>
    </label>   `

EDIT:

I got the answer here, if anyone is interested:

http://stackoverflow.com/questions/42873686/how-to-disable-ripple-effect-on-getmdls-toggle/42875978#42875978