0

I have discovered that Magento's modal-popup's do not scroll on safari.

You can see this is you log into a Magento 2 demo store with a user which has a saved shipping address. Go to the checkout and click on the New Address button.

enter image description here

You will notice that eventhough the .modal-popup has a CSS rule for overflow-y: auto it does not scroll.

I've search online and this seems to be a common issue on Safari, but none of the solutions I have read of work for Magetno.

Improve this question

3 Answers 3

Reset to default
3

Check PR: https://github.com/magento/magento2/pull/21150 for the fix.

It's an issue with the pointer-events property. Just need to set it to auto

Improve this answer
1
  • pointer-events: none; is the issue. Should be "auto", as sticky headers are obstructive on mobile screens, especially when they contain only titles, lol
    – Iveta Allogenes
    Dec 2, 2019 at 14:30
2

This issue has been picked up and I believe a fix issued on Magento V 2.3 as follows: https://github.com/magento/magento2/issues/21147

However, I see no fix for 2.2. I have issues when a customer logged into their account cannot add an address as it is a modal form. Clicking text entry boxes (ie phone number) at the bottom of the screen allows the form to scroll up but is far from ideal. Has anyone seen a patch for 2.2?

Improve this answer
0

Setting the modal-inner-wrap div to have height: 100%, makes the inner div scrollable which is a better UX but still different from how it works on chrome without.

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .modal-popup.modal-slide._inner-scroll .modal-inner-wrap {
        height: 100%;
    }
}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.