These 3 screenshots should illustrate the problem:
Lloyd also asked that I try this page out to verify the page is getting the correct sizes from the web view, which it appears to be:
Right now, we load the dialog in full screen but it has a huge amount of whitespace and generally doesn't look very good.
@shane-tomlinson I worked with @sppavlov on this one, and have full context. This is for our mozilla homies. The key question is why do many sites render properly in this iOS popup thingy while we don't? Is there a simple CSS change we can make in order to correctly detect the size and at least get the dialog to understand the size of the window?
@sppavlov - @shane-tomlinson confirmed that this is going to be WAAAY easier if there's a sample ipad app for us. basically it's an app that shows a text box and a button. put a url in the text box, click the button, and it pops up the url in the preferred modal thingy that you guys wanna display the sign-in dialog in.
Any way you guys can assist with this?
@lloyd I'll build you something!
+1 for sample app
Oops I don't think I ever sent an app your way. I create a super simple app at https://bitbucket.org/st3fan/foo-viewer It has a screen with a url and three buttons to open a browser that is 1) iPhone Size 2) iPad Size 3) iPad Modal Sheet Size.
You can run it in Xcode in the iPad simulator. Rotation works. Let me know if this is useful.
@shane-tomlinson and @lloyd should we do a little session on this now that we have a sample app?
Also, I am wondering if this is a more general issue for all tablets...
Fix for issue #1517 - BrowserID Dialog overflowing
@lloyd / @shane-tomlinson - This is being caused because the site is using the device width rather than the iOS popup window's width. Removing width=device-width from the viewport meta tag seems to fix the issue — I don't believe this breaks anything since we're setting the initial-scale and minimum-scale.
hotfix dialog overflow in train-2012.06.22 - issue #1517
Verified as fixed in Stage