{"action":"created","issue":{"url":"https://api.github.com/repos/angular/material/issues/10033","repository_url":"https://api.github.com/repos/angular/material","labels_url":"https://api.github.com/repos/angular/material/issues/10033/labels{/name}","comments_url":"https://api.github.com/repos/angular/material/issues/10033/comments","events_url":"https://api.github.com/repos/angular/material/issues/10033/events","html_url":"https://github.com/angular/material/issues/10033","id":190040727,"number":10033,"title":".md-icon-button ripple effect error","user":{"login":"GeekOSK","id":13559340,"avatar_url":"https://avatars.githubusercontent.com/u/13559340?v=3","gravatar_id":"","url":"https://api.github.com/users/GeekOSK","html_url":"https://github.com/GeekOSK","followers_url":"https://api.github.com/users/GeekOSK/followers","following_url":"https://api.github.com/users/GeekOSK/following{/other_user}","gists_url":"https://api.github.com/users/GeekOSK/gists{/gist_id}","starred_url":"https://api.github.com/users/GeekOSK/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/GeekOSK/subscriptions","organizations_url":"https://api.github.com/users/GeekOSK/orgs","repos_url":"https://api.github.com/users/GeekOSK/repos","events_url":"https://api.github.com/users/GeekOSK/events{/privacy}","received_events_url":"https://api.github.com/users/GeekOSK/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2016-11-17T13:00:43Z","updated_at":"2016-11-18T13:24:28Z","closed_at":null,"body":"The Angular Material issue which is pretty disturbing. When I hold-click the icon and ripple sticks on the element. After that when release the hold-click, the icon's background becomes absolute colored with the same color as that of the ripple!\r\n\r\n![error](https://cloud.githubusercontent.com/assets/13559340/20390229/e198534a-acf3-11e6-942b-644b897d6d5c.gif)\r\n\r\n[`Here's the codepen for that`](http://codepen.io/GeekOSK/pen/wooovv)\r\n\r\nI have Angular Material 1.1.0.\r\n"},"comment":{"url":"https://api.github.com/repos/angular/material/issues/comments/261530604","html_url":"https://github.com/angular/material/issues/10033#issuecomment-261530604","issue_url":"https://api.github.com/repos/angular/material/issues/10033","id":261530604,"user":{"login":"GeekOSK","id":13559340,"avatar_url":"https://avatars.githubusercontent.com/u/13559340?v=3","gravatar_id":"","url":"https://api.github.com/users/GeekOSK","html_url":"https://github.com/GeekOSK","followers_url":"https://api.github.com/users/GeekOSK/followers","following_url":"https://api.github.com/users/GeekOSK/following{/other_user}","gists_url":"https://api.github.com/users/GeekOSK/gists{/gist_id}","starred_url":"https://api.github.com/users/GeekOSK/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/GeekOSK/subscriptions","organizations_url":"https://api.github.com/users/GeekOSK/orgs","repos_url":"https://api.github.com/users/GeekOSK/repos","events_url":"https://api.github.com/users/GeekOSK/events{/privacy}","received_events_url":"https://api.github.com/users/GeekOSK/received_events","type":"User","site_admin":false},"created_at":"2016-11-18T13:24:28Z","updated_at":"2016-11-18T13:24:28Z","body":"## ERROR FIXED!!!\r\n![errorfix](https://cloud.githubusercontent.com/assets/13559340/20431399/cbbce370-adbf-11e6-8eca-b84d00906bd1.gif)\r\n\r\nI just changed to tag from `<md-button>` to `<a>` and added the **needful CSS** and voila!\r\n**This is the needful CSS:**\r\n`.md-icon-button:not(.md-button){\r\n    position: relative;\r\n    overflow: visible;\r\n    padding:8px;\r\n}\r\n.md-icon-button:not(.md-button) .md-ripple-container{\r\n    overflow: visible;\r\n}`\r\n[Here's the codepen for the fixed one](http://codepen.io/GeekOSK/pen/wooovv)\r\n\r\n"}}
{"actor":{"display_login":"GeekOSK"}}