material-components-web: Temporary Drawer retracting animation broken on iOS 11.2

What MDC-Web Version are you using?

0.26.0

What browser(s) is this bug affecting?

Mobile Safari

What OS are you using?

iOS 11.2

What are the steps to reproduce the bug?

(On an iOS 11.2 device) go to the drawer demo page (https://material-components-web.appspot.com/drawer/temporary-drawer.html)
Open the temporary drawer
Close it.

What is the expected behavior?

The drawer closes with a smooth animation.

What is the actual behavior?

The drawer jerks back and forth and takes forever to completely close.

Any other information you believe would be useful?

Has been tested on iPhone 8, iPhone 6S, iPod Touch 6th gen, iPad Air 2. The bug seems to only occur since the iOS 11.2 update.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 5
Comments: 18 (7 by maintainers)

Commits related to this issue

fix(drawer): Open/close animation in iOS 11.2 [UNTESTED] Fixes #1700 — committed to material-components/material-components-web by acdvorak 6 years ago

Most upvoted comments

I was able to repro on iOS 11.2 Safari.

The video capture below is real-time speed - it’s not slowed down at all.

Yikes!

Screen recording of iOS 11.2 Safari

+16

acdvorak on Dec 7, 2017

Very recognizable. I’m experiencing the same issue on my site: https://www.droominfo.nl

EDIT

We discovered that the drawermenu always shows on legacy iOs devices such as an iPad air (first edition). I think this is due to the fact that older webkit browser can’t handle a transform with 2 negative values (e.g. translateX(calc(-100% -20px))).

Whilst refactoring for older webkit browsers, the retracting drawermenu problem disappeared. This is what i did to make it work:

Add this snippet to your own scss, after you included the drawer component.


.mdc-temporary-drawer__drawer {
  display: -webkit-box;
  -webkit-transition: all .195s ease;
  -webkit-transform: translateX(-400px);
}

.mdc-temporary-drawer--open  {
  .mdc-temporary-drawer__drawer {
    -webkit-transform: none;
  }
}

Voila, everything Disco!

MarcoTroost on Jan 3, 2018

Try add this snippet to your own scss:

.mdc-drawer--temporary  { 
  .mdc-drawer__drawer {
    transform: translateX(calc(-100vw - 20px));
    -webkit-transform: translateX(calc(-100vw - 20px));
  }
}

If you want drawer came out on the right, use next in html:

<aside class="mdc-drawer mdc-drawer--temporary" dir="rtl">
  <nav class="mdc-drawer__drawer" dir="ltr">
    ...
  </nav>
</aside>

and scss:

.mdc-drawer--temporary  { 
  .mdc-drawer__drawer {
    transform: translateX(calc(100vw + 20px));
    -webkit-transform: translateX(calc(100vw + 20px));
  }
}

P.S. vw doesn’t support older browsers

BekStar7 on Jan 18, 2018

Hello everyone, happy to report the issue is resolved on ios 11.2.5. Unfortunately anyone who doesn’t upgrade will still have the issue so now it’s a question of:

Do we leave it as is and have people fix it in their own code bases as needed (probably)

Do we find a solution that works for both since people will likely be on ios11 for the next year. I don’t have a way of testing but I want to know the exact versions this effects. To my knowledge it’s only been 11.2.

jamesmfriedman on Jan 29, 2018