Position fixed and ripple effect

MDL version: 1.3 Browser: Chrome Browser version: 48.0.2564.109 (64-bit) Operating system: ubuntu Operating system version: 14.04 LTS URL: na

I'm working with a design where I have a mdl-card with toolbar buttons placed in a footer. The buttons are "decorated" with ripple effect. In some cases, the footer may be sticky and placed at the bottom of the viewport. The problem that arises when the footer is sticky is that the footer disappears while ripple animation is in progress. This is not a big problem since I can remove ripple effect to avoid this - but I think it might be okay for you to verify this.

What steps will reproduce the problem:

Code a mdl-card
Add a footer element with position fixed inside mdl-card
Inside the footer code a nav element with buttons decorated withclass"mdl-js-ripple-effect" 4: Click on the button

What is the expected result? The ripple effect should work the same as when footer has position absolute

What happens instead of that? The footer disappears while ripple animation is in progress.

Please provide any other information below, and attach a screenshot if possible.

Example code to reproduce issue:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Material Design Lite Extensions</title>

  <!-- styles -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="../node_modules/material-design-lite/material.css" />

  <style>
    .mdl-card {
      position: relative;
    }
    footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 8px;
      background-color: #FFFFFF;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    footer.sticky--footer {
      position: fixed;
     }
    footer .mdl-card__supporting-text {
      flex: 1;
      overflow: hidden;
      padding: 0;
      height: 16px;
      width: 100%;
    }
  </style>
</head>

<body>
<div class="mdl-layout mdl-js-layout">
  <main id="mount" class="mdl-layout__content">

    <div class="mdl-card mdl-shadow--4dp">
      <div class="mdl-card__menu">
        <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" title="Close">
          <i class="material-icons">close</i>
        </button>
      </div>
      <section class="mdl-card__title">
        <h2 class="mdl-card__title-text">Image viewer</h2>
      </section>
      <footer class="sticky--footer mdl-card__actions mdl-card--border">
        <div class="mdl-card__supporting-text">
          A supporting text
        </div>
        <nav>
          <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" title="First">
            <i class="material-icons">first_page</i>
          </button>
          <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" title="Previous">
            <i class="material-icons">chevron_left</i>
          </button>
          <button class="mdl-button mdl-button--icon mdl-js-button" title="Next">
            <i class="material-icons">chevron_right</i>
          </button>
          <button class="mdl-button mdl-button--icon mdl-js-button" title="Last">
            <i class="material-icons">last_page</i>
          </button>
        </nav>
      </footer>
    </div>

  </main>
</div>
<script type="text/javascript" src="../node_modules/material-design-lite/material.js" charset="utf-8"></script>
</body>
</html>

google / material-design-lite

Position fixed and ripple effect #4240