google / google/material-design-lite

Radial action ripples appear for non-touch events

Open
#2,033 7 comments 0 reactions 0 assignees View on GitHub
feature-request Ripple
Dominant language
HTML
Stars
32.2k
Forks
4.9k
PR merge metrics
No merged PRs in 30d

Description

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](http://www.getmdl.io/components/index.html#toggles-section)
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](https://www.google.com/design/spec/components/selection-controls.html), 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](https://cloud.githubusercontent.com/assets/234957/10579158/724c517e-766e-11e5-8348-366f830d36a7.gif) (from #1723) that shows this happening.

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

Interestingly, the [Polymer project checkboxes](https://elements.polymer-project.org/elements/paper-checkbox?view=demo:demo/index.html) call this the "ripple effect", and have an attribute "noink" to disable it.

The [Material Design "Responsive Interaction" page](https://www.google.com/design/spec/animation/responsive-interaction.html) calls it the Touch Ripple (capitalized), and says it "articulates the method and duration of a touch event".

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.