Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

md-button ripple effect is incorrect size when transform: scale is applied #1526

Closed
buu700 opened this issue Feb 16, 2015 · 4 comments
Closed
Assignees
Milestone

Comments

@buu700
Copy link

buu700 commented Feb 16, 2015

In my case, I have some buttons that I've shrunken with transform: scale, and the ripple effect looks more like a flash effect (entire button lighting up).

However, the issue fixes itself if I hold my click for a few seconds (just for that particular instance of the effect, that is; the issue doesn't go away for the rest of the session or anything like that).

@ThomasBurleson ThomasBurleson modified the milestone: 0.8.0 Feb 17, 2015
@robertmesserle robertmesserle modified the milestones: 0.8.0, 0.9.0 Feb 19, 2015
@robertmesserle
Copy link
Contributor

This sounds like a browser bug more than anything, but do you think that you can provide a codepen or plunker demo?

@buu700
Copy link
Author

buu700 commented Mar 25, 2015

Hm, I just spent some time testing this again (in Chrome and Firefox on OS X), and it looks like I had the problem slightly off. It's actually unrelated to transform: scale (the small size of the button just makes the effect more prominent in my case).

I'm not sure whether this is by design, but it appears that the origin of the ripple effect is affected by scroll position, not just cursor position.

I can get back to you with a demo, but in my particular case, what's happening is that when I'm scrolled all the way up on the page and I click the centre of my button, the ripples emanate from around my cursor (the centre of the button); however, as I scroll down the page, the ripple origin grows progressively further south of my cursor.

I couldn't say where, but at a glance of src/core/services/ripple/ripple.js this strikes me as some kind of state issue (assuming it isn't by design).

Also, unrelated, but while testing this, I clicked my button a bunch of times and md-ripples with data-counters #107 and #423 got permanently stuck.

@robertmesserle
Copy link
Contributor

@buu700 I added a fix that SHOULD solve your issue - can you please confirm that the latest code in master fixes this issue?

@buu700
Copy link
Author

buu700 commented Mar 25, 2015

Awesome, thanks. Looks like it mostly works now in master, except buttons with position: fixed still behave as before.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants