Tops of pages missing after dialog click in Safari and iPhone #1461

Closed
gerbs opened this Issue Apr 16, 2011 · 14 comments

8 participants

@gerbs

In the iPhone Safari and regular Safari browser (adjusted to about the size of the iPhone browser), the tops of pages go missing after clicking on a dialog button and then returning to the page that has the dialog button..

You can reproduce this on the jQuery demo pages. Go to http://jquerymobile.com/demos/1.0a4.1/#docs/pages/docs-dialogs.html on the iPhone, and click any of the dialog buttons. After returning to the page, notice how the top of the page is missing, including the header. The further down the page you go and click on a dialog button, the more of the top of the page will be gone.

@toddparker

This is a really bad regression, not sure how we didn't notice this in testing. This is a blocker.

@VTWoods

I also experience this issue on an iPod Touch iOS 4.1. After the dialog box, the top of the page is missing and the page is rendered incorrectly.

@scottjehl

looks like we just need to set focus after the silentscroll event fires.

@jblas jblas was assigned Apr 21, 2011
@jblas

Fix checked in:

2d2e6d7

@jblas jblas closed this Apr 21, 2011
@sebabal

I tried the fix but it did not work for me. Using safari windows or iPod

@jblas

@sebabal

Do you have an example URL we can see? I can't repro this since the fix.

@MikeTek

I'm having this problem too. Closing dialog kills the top of the page. You guys are hosting .js files so not sure how to implement a fix from my end.

@sebabal

Sorry for this late reply...
@jblas sorry I don't have a public URL yet, although it is strange that you can't reproduce it, maybe it is something on my end.

On my case it was happening whether it was a dialog or page loaded by ajax (using the multi-page feature). The only workaround that I found was to stop using the data-position="fixed" on the header

@MikeTek

I had been using the data-position="fixed" in the headers and noticed this problem. Removed it, problem persists. At a loss at this point.

@MikeTek

This still happening on your demo site. I'm in Chrome. If I visit the dialogs page - http://jquerymobile.com/demos/1.0a4.1/#docs/pages/docs-dialogs.html - scroll down and click the "An Alternative Color Scheme" button, upon closing the top of the page is cut off.

Same behavior in iOS 4.

@jblas

@MikeTek,

The 1.0a4.1 URL you reference is static, that is, it is a snapshot of that alpha that doesn't change. You want to test against the latest greatest from our code repository, you have to use:

http://jquerymobile.com/test/

@aktsinha

I do not want to use the the nightly build (its causing some issues for me). Could someone please point me to the changes I would need from alpha4.1? I tried this commit, also reFocus within setTimeout , but thats not helping.
Thanks
Ankit

@toddparker

Kin linked to the relevant commit above in this thread:
2d2e6d7

@aktsinha

Hi, this commit alone does NOT solve the issue. Perhaps there have been lots of changes in Screen Focus Management.
My problem is with data-position fixed header/footer: Their layout is messed up on returning from a dialogue or Ajax Navigation. It gets fixed (footer returns to expected position) when I manually select some input element.
So is there someway I can force the screen to layout again? Something like $.mobile.activePage.layout or repaint, layoutFooter, setFocus/removeFocus....
Also, when is your next release planned for, if it is within a week or so I will wait for it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment