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

[mjwwit]

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?

1. (On an iOS 11.2 device) go to the drawer demo page (https://material-components-web.appspot.com/drawer/temporary-drawer.html)
2. Open the temporary drawer
3. 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.

[acdvorak]

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!

[menelike]

Does anyone have a clue how to temporarily fix this issue?

[mjwwit]

@menelike, I disabled the close animation as a temporary workaround. Far from optimal, but better than the jerky drawer.

[menelike]

@mjwwit Thanks a lot!

I can confirm that removing mdc-temporary-drawer--animating from the classname worked.

[kfranqueiro]

Some additional helpful information was provided by @luspav on #1790.

[canaanites]

+1

[MarcoTroost]

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!

[canaanites]

@MarcoTroost Thank you! I confirm the above solution has fixed the issue.

I have added the above CSS in my HTML file right under the material components tag:
<link rel="stylesheet" href="/node_modules/material-components-web/dist/material-components-web.css">

iPhone 6s
iOS 11.2.1

[ruwaroshan]

I have implemented the fix from @MarcoTroost and checked it as bellow and it is working fine. Thank you!

iPhone 6s 11.2.1
iPad 11.2.1
Mac Safari 11.0.2

[koba-ninkigumi]

@MarcoTroost 0.28.0 seems to be unable to use that solution.

[jamesmfriedman]

Confirming still an issue on 11.2

[BekStar7]

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

[JordyvA]

+1

[edi2lopez]

+1

[jamesmfriedman]

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.

[acdvorak]

@BekStar7 Thanks for the suggestion!

Be aware that 100vw != 100% 🙂

• 100% = width of the __drawer element
• 100vw = width of the viewport

Using 100vw will cause the drawer enter/exit animations to be _much_ faster (especially on desktop).

[acdvorak]

Thanks for the update @jamesmfriedman! Glad to hear this bug has been fixed by Apple.

I'm inclined to leave MDC Web as-is, and let folks fix this in their own code base if necessary. I'm not wild about leaving some users with a broken experience, but it's probably not worth spending time to fix a bug that increasingly few people will see.

However, if someone from the community is able to fix this ~with a one- or two-line PR~ [EDIT: It's probably more involved than that], we would be more than happy to review it!

One potential workaround would be to avoid the calc(...) expression entirely.
I threw together an experimental/drawer/ios-animation branch to show how this might be done.
The only problem with the way I'm doing it in the experimental branch is that it makes the setTranslateX() API confusing.

I'm not able to repro this in desktop Safari 11.0.2 on macOS 10.13.2 (High Sierra), but some people reported seeing it in #1838.

[abhiomkar]

This is fixed in new Drawer version.