| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Chrome Ripple Issue</title> |
| <!-- styles --> |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en"> |
| <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> |
| <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css"> |
| </head> |
| <body> |
| <!-- Always shows a header, even in smaller screens. --> |
| <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> |
| <header class="mdl-layout__header"> |
| <div class="mdl-layout__header-row"> |
| <!-- Title --> |
| <span class="mdl-layout-title">Title</span> |
| <!-- Add spacer, to align navigation to the right --> |
| <div class="mdl-layout-spacer"></div> |
| <!-- Navigation. We hide it in small screens. --> |
| <nav class="mdl-navigation mdl-layout--large-screen-only"> |
| <a class="mdl-navigation__link" href="">Link</a> |
| <a class="mdl-navigation__link" href="">Link</a> |
| <a class="mdl-navigation__link" href="">Link</a> |
| <a class="mdl-navigation__link" href="">Link</a> |
| </nav> |
| </div> |
| </header> |
| <div class="mdl-layout__drawer"> |
| <span class="mdl-layout-title">Title</span> |
| <nav class="mdl-navigation"> |
| <a class="mdl-navigation__link" href="">Link</a> |
| <a class="mdl-navigation__link" href="">Link</a> |
| <a class="mdl-navigation__link" href="">Link</a> |
| <a class="mdl-navigation__link" href="">Link</a> |
| </nav> |
| </div> |
| <main class="mdl-layout__content"> |
| <div class="page-content" style="padding: 128px 0 0 32px"><!-- Your content goes here --> |
| |
| <h2>Ripple Issue</h2> |
| <ul> |
| <li>What MDL Version: material-design-lite-1.2.1</li> |
| <li>What browser(s) is this bug affecting (including version)? Chrome Version 53.0.2785.116 (64-bit)</li> |
| <li>What OS (and version) are you using? OSX, 10.11.6</li> |
| <li>What are the steps to reproduce the bug? |
| <ol> |
| <li>Resize browser until a scrollbar appears</li> |
| <li>Scroll the menu button into view</li> |
| <li>It's important to scroll, at least some pixels, to see the effect of this issue</li> |
| <li>Click the button to open the menu</li> |
| <li>The position of the content changes position while button ripple is animatings</li> |
| <li>Click on a menu item to close the menu</li> |
| <li>The position of the content changes while menu ripple is animating</li> |
| </ol> |
| </li> |
| <li>What is the expected behavior? The position of the should stay fixed</li> |
| <li>What is the actual behavior? The position of the page content changes</li> |
| </ul> |
| |
| <div style="margin: 32px 0 640px 32px;"> |
| <p><strong>Click the button</strong></p> |
| <button id="demo-menu-lower-left" style="height:46px; width:46px;" |
| class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"> |
| <i class="material-icons">more_vert</i> |
| </button> |
| |
| <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" |
| for="demo-menu-lower-left"> |
| <li class="mdl-menu__item">Some Action</li> |
| <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li> |
| <li disabled class="mdl-menu__item">Disabled Action</li> |
| <li class="mdl-menu__item">Yet Another Action</li> |
| </ul> |
| </div> |
| |
| <p>Some text</p> |
| |
| </div> |
| </main> |
| </div> |
| <script src="https://code.getmdl.io/1.2.1/material.min.js" type="text/javascript" charset="utf-8"></script> |
| </body> |
| </html> |