Admin Page: cannot disconnect Jetpack from WordPress.com on mobile device

[jeherve]

It isn’t possible to disconnect Jetpack using small screen device. Tested on iPhone SE with Safari. Disconnect modal (with red “Disconnect” button) does not fit into the screen, it isn’t scrollable or zoomable.

https://videopress.com/v/5681LuTP

[beaulebens]

Same as #8744 let's just move the [x] like we did in #8697

[keoshi]

Works for me, I'm still able to scroll on Chrome, Safari, Firefox. Do you mind retesting, @jeherve or dropping your Safari version here?

[jeherve]

Pinging @brbrr since he reported the issue; I don't have an iOS device to test with unfortunately :(

[brbrr]

I've just re-tested using Safari on iPhone SE / iOS 11.2.6 - issue is still there.

@keoshi what device you were using?

[keoshi]

@brbrr iPhone X with Chrome and Safari, but I guess it has something to do with the height on the screen.

Even weirder: when tested in emulation mode in desktop it scrolls without a problem. As it should, since we're declaring .dops-modal-wrapper { overflow-y: auto; }.

I wonder if this is overriding the scrolling behavior above:

body.dops-modal-showing {
    overflow: hidden;
}

[brbrr]

I'm almost 100% sure the issue is reproducible SE screen size/ratio

[keoshi]

@brbrr I can reproduce the non-scrolling issue, digging a bit more into it. There seems to be something that triggers an overflow: hidden; — another one, not the body.dops-modal-showing above — when the modal comes up.

[keoshi]

Ok, this is weird. Did more debugging with the iPhone hooked up to the Mac so I could use Safari's inspector and here's what I've done:

• Removed the modal wrapper and all it's children from the page.
• Clicked “Manage Connection”, scroll stops working as expected because of body.dops-modal-showing { overflow: hidden; }.
• Went ahead and deleted that class from the body.
• Scroll still doesn't work.
• Starts working again once I click “Manage Connection” a second time (closing the modal if it was still there).

Here's a video:

https://www.youtube.com/watch?v=wuguY-yfivI

I'm at a loss here, since I don't see any more overflow: hidden rules down the cascade.

@Automattic/jetpack is this a behavior of the modal, the button itself, or am I missing something obvious here?