-
Notifications
You must be signed in to change notification settings - Fork 2.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Temporary Drawer retracting animation broken on iOS 11.2 #1700
Comments
Does anyone have a clue how to temporarily fix this issue? |
@menelike, I disabled the close animation as a temporary workaround. Far from optimal, but better than the jerky drawer. |
@mjwwit Thanks a lot! I can confirm that removing |
+1 |
Very recognizable. 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.
Voila, everything Disco! |
@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:
|
I have implemented the fix from @MarcoTroost and checked it as bellow and it is working fine. Thank you! iPhone 6s 11.2.1 |
@MarcoTroost 0.28.0 seems to be unable to use that solution. |
Confirming still an issue on 11.2 |
Try add this snippet to your own scss:
If you want drawer came out on the right, use next in html:
and scss:
P.S. |
+1 |
1 similar comment
+1 |
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. |
@BekStar7 Thanks for the suggestion! Be aware that
Using |
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 One potential workaround would be to avoid the 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. |
This is fixed in new Drawer version. |
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?
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.
The text was updated successfully, but these errors were encountered: