ripple: incorrect positioning behaviour

[artch]

I investigated some weird cases in ripple behavior and found this piece of code in the ripple service:

if (options.outline) {
    elem.css({
      borderWidth: (size * 0.5) + 'px',
      marginLeft: (size * -0.5) + 'px',
      marginTop: (size * -0.5) + 'px'
   });
} else {
  elem.css({ left: '50%', top: '50%' });
}

Last statement (line 209, elem.css({ left: '50%', top: '50%' })) causes inconsistent behavior of ripple positioning. Here are some examples:

With line 209 included:

With line 209 commented:

What is that last elem.css statement for? It seems to be something not supposed to be there.

[EladBezalel]

👍 seems very odd.. Who wrote this?

[ThomasBurleson]

@artch - The commented code seems to yield a much better UX.

[robertmesserle]

This was done according to the Material spec, as demonstrated in the first animation on this page:

http://www.google.com/design/spec/animation/responsive-interaction.html#

However, in other examples, this does not occur. We should clarify with the Material team when this should and shouldn't happen.

[robertmesserle]

Also, this centering animation is important for the held state; however, I believe that earlier, this part of the animation was slowed down to make it less apparent unless you actually held the click. In either case, we should look into ways to make it fit better.

[ThomasBurleson]

@robertmesserle - the corner-clicks [with line 209 included] definitely looks odd.

[robertmesserle]

Agreed, this is emphasized by the square button and the non-filling ripple.
We should probably add the ability to override the default settings for
situations like this. Not only does the centering effect look weird, but
any held state will look off as well in this example.

On Thu, Jan 1, 2015, 7:46 PM Thomas Burleson notifications@github.com
wrote:

@robertmesserle https://github.com/robertmesserle - the corner-clicks
[with line 209 included] definitely looks odd.

—
Reply to this email directly or view it on GitHub
#1088 (comment).

[ThomasBurleson]

👍

[robertmesserle]

I added an attribute to allow you to override the ripple sizing based on your use-case:

https://material.angularjs.org/#/api/material.components.button/directive/mdButton

You would want to add md-ripple-size="full"

[ilanbiala]

@robertmesserle what is the default?

[robertmesserle]

The default functionality is that with md-fab buttons, it fills the available space whereas non-fab buttons will fill 80% of the space. This is based on examples from the material site; however, in the case of a square button, it ends up looking off, so you would likely want to override with 'full'.

[ilanbiala]

@robertmesserle the ripple code is based off which Material sample? They seem to go more edge-to-edge and a little bit faster, no?

[robertmesserle]

If you look here:
http://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons

Under the heading of "buttons in motion" they have an animation in which the ripples do not fill the buttons.

There is also an example of this with list items in the first example on this page:

http://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-user-input

Of course, the middle example shows it filling the space, so both are supported in different circumstances.

[ilanbiala]

Ok I was thinking of the middle one, so I just wanted to clarify.