Dialog: Overlay background incorrect in android browser

[groupboard2]

Go to ​http://taitems.github.io/Aristo-jQuery-UI-Theme/ in android browser and click 'open modal dialog'. Zoom in and out of page with pinch zoom. You'll see that the grey modal background is screwed up until you try scrolling. Works perfectly on chrome browser.

[tj.vantoll]

Hi groupboard2,

Thanks for taking the time to contribute to the jQuery UI project. Are you seeing the behavior here ​http://jsfiddle.net/tj_vantoll/QFp2J/show/?

Also what version of Android are you using?

Thanks.

[groupboard2]

Yes, the bug occurs there (although not quite as easy to recreate). If you rotate to landscape you'll see a big white rectangle on the left hand side. Using Android 4.1.2 on a samsung galaxy note.

[Alexander Schmitz]

This is not a bug this is how android works because you have not set a viewport meta tag the android browser zooms to what it thinks is a good level when the page loads and then it zooms to a new "good" level when you change orientation. But zooming a fixed position element actually scale elements in android browser ( creating the whitespace you see ). if you set a viewport meta tag like this to enforce the initial scale <meta name="viewport" content="width=device-width, initial-scale=1"> you will not see this problem any more ( unless you zoom ) While this is less then ideal its just how android decided to implement fixed positioning.http://jsbin.com/ukUvAVUR/6/edit using that meta tag no longer exhibits this issue.

[Jörn Zaefferer]

groupboard2, can you confirm that using the meta tag would solve the problem for you?

[trac-o-bot]

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!