Themes: preview not working on mobile Safari

[designsimply]

Raised by @seear

To Reproduce

1. Visit wordpress.com/design on iPhone or Safari->Develop->Responsive Design in iPhone mode
2. Tap on a theme screenshot. Note that the preview does not appear.

Found on my phone, and OS X Safari responsive mode shows same behavior:

.web-preview__frame height is 0 for some reason.

Preview works in iPhone editor, but the phone/tablet/desktop switcher is obscured by the (master?)bar at the top.

Comment from @ehg

Changing .web-preview__frame to have a min-height: 100% fixed this for me. Not sure how wise that is.

Reply from @seear

It seems to be some weird interaction with the float: right property on the .main element, because dropping that causes this the preview to start working. This information strikes me as disheartening rather than enlightening.

min-height: 100% seems to me to be a decent solution in the circumstances.

Notes from @lancewillett

Still happening — not just Mobile Safari but any small screen view, like using Firefox desktop browser and changing to small screen size with Cmd-Shift-M.

Relates to 7657-wpcom in that we'd like to send mobile preview requests directly to site preview and not to Customizer.

[lancewillett]

Testing this again today: it's working as expected now. :)

Testing with https://wpcalypso.wordpress.com/design/lancetest23.wordpress.com

1. On a small screen device, go to My Sites
2. Click Themes
3. Click a theme screenshot
4. The demo site preview loads correctly.

iPhone 6+, iOS 9.3.1