Material: <md-menu> shrinks on iOS safari

[echenley]

If an md-menu is opened when iOS safari is in "minimal UI" mode (after scrolling down), it will shrink to a tiny size. Example:

This doesn't affect the demo site since the behavior is prevented by restricting overflow scrolling to a div, rather than the body element.

[brad-sobie]

+1

[ThomasBurleson]

@robertmesserle - can you review and test this?

[jpike88]

Just came across this one. +1

[jpike88]

This issue doesn't just occur in iOS safari, also happens in Chromium (Crosswalk). Might be related to touch devices

[jpike88]

And that pull request didn't work for me

[devversion]

Just wan't to pin this here.

• The fix works as expected in my case.

@jpike88 said its not working, because he missed copying all lines. (See here)

[nicolac18]

+1

[Lykathia]

So, is this fixed? What was the PR?

[lephuongbg]

My current workaround for this is just disabling the scaling animation when on Safari mobile:

// Detect mobile safari
var ua = window.navigator.userAgent,
iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i),
webkit = !!ua.match(/WebKit/i),
iOSSafari = iOS && webkit && !ua.match(/CriOS/i);
if (iOSSafari) {
    $('body').addClass('safari-mobile');
}

/* Disable transformation */
.safari-mobile .md-open-menu-container.md-active {
    transform: none !important;
}

[FlorianBurgevin]

Some news to fix this ?

[fierysolid]

Agreed, I'd like to see this get fixed as well.

[mattjennings]

The solution from @herophuong works well. It'd be nice to have an official fix soon, though.