hideDuringFocus doesn't work correctly on Chrome #5514

Closed
benwwest opened this Issue Jan 23, 2013 · 27 comments

Comments

Projects
None yet
6 participants
@benwwest

I have created a simple JQuery Mobile prototype for an in house demo and have noticed a small issue with fixed footers.

The fixed footer seems to work fine on a desktop browser, however on mobile safari (possibly others) the fixed footer seems to move to the bottom of the entire page (i.e. of the screen) when a select box is opened.

I am using the data-tap-toggle="false" attribute on the footer to keep it visible even if the screen is tapped - it seems that when a select box is used it overrides this and still hides the footer/ sets it to the bottom of the page.

If you require an example please contact me privately and i'll share a link.

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Jan 23, 2013

Member

This is intentional we hide the toolbars when a select or the keyboard opens this is to allow more space visible on the screen. It also solves an iOS bug where fixed positioning is not supported while select menus or the keyboard is open. You don't see this on desktop or larger screens because this behavior is targeted only to smaller screens.

Because this is not a bug but intentional i'm going to close this issue.

Member

arschmitz commented Jan 23, 2013

This is intentional we hide the toolbars when a select or the keyboard opens this is to allow more space visible on the screen. It also solves an iOS bug where fixed positioning is not supported while select menus or the keyboard is open. You don't see this on desktop or larger screens because this behavior is targeted only to smaller screens.

Because this is not a bug but intentional i'm going to close this issue.

@arschmitz arschmitz closed this Jan 23, 2013

@benwwest

This comment has been minimized.

Show comment
Hide comment
@benwwest

benwwest Jan 23, 2013

Hi, thanks for looking into this.

I agree that when the keyboard/select is open the footer should be hidden, however when the select is closed again the footer does not retain its fixed position, it moves to the bottom of the page. surely the fixed footer should re-appear at the bottom of the screen not the bottom of the page?

Hi, thanks for looking into this.

I agree that when the keyboard/select is open the footer should be hidden, however when the select is closed again the footer does not retain its fixed position, it moves to the bottom of the page. surely the fixed footer should re-appear at the bottom of the screen not the bottom of the page?

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Jan 23, 2013

Member

Can you please provide a jsbin test page you can get the emplate in our contributing guidlines https://github.com/jquery/jquery-mobile/blob/master/CONTRIBUTING.md if you can provide a test page showing the issue we will re open

Member

arschmitz commented Jan 23, 2013

Can you please provide a jsbin test page you can get the emplate in our contributing guidlines https://github.com/jquery/jquery-mobile/blob/master/CONTRIBUTING.md if you can provide a test page showing the issue we will re open

@benwwest

This comment has been minimized.

Show comment
Hide comment
@benwwest

benwwest Jan 23, 2013

Hi, test page can be found here:

http://jsbin.com/ixudew/8

You should see that the header /footer disapears when the select is opened, and when closed, they no longer have their fixed position.

I have tried this with and without the data-tap-toggle="false" and the same occurs either way.

Tested on iPad and iPhone 5 running latest iOS

Hi, test page can be found here:

http://jsbin.com/ixudew/8

You should see that the header /footer disapears when the select is opened, and when closed, they no longer have their fixed position.

I have tried this with and without the data-tap-toggle="false" and the same occurs either way.

Tested on iPad and iPhone 5 running latest iOS

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Jan 23, 2013

Member

I can see this now and this is a bug for sure i will take a look at what causing this there is code in place to show the toolbars again but it does not seem to be working. im going to reopen this.

Member

arschmitz commented Jan 23, 2013

I can see this now and this is a bug for sure i will take a look at what causing this there is code in place to show the toolbars again but it does not seem to be working. im going to reopen this.

@arschmitz arschmitz reopened this Jan 23, 2013

@ghost ghost assigned arschmitz Jan 23, 2013

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jan 23, 2013

Member

@benwwest

Thanks for reporting the issue. It is fixed in latest code now.
BTW - hideDuringFocus is an option which you can set to false if you want.

Member

jaspermdegroot commented Jan 23, 2013

@benwwest

Thanks for reporting the issue. It is fixed in latest code now.
BTW - hideDuringFocus is an option which you can set to false if you want.

@JSkimming

This comment has been minimized.

Show comment
Hide comment
@JSkimming

JSkimming Jan 23, 2013

Hi I'm a colleague of @benwwest and I've just tested the fix on an Android Galaxy S3 (Android 4.04).

Here's an updated example using the latest JQM from the CDN http://jsbin.com/ixudew/12

It works in the native browser, though the select experience is quite different, but on Chrome for Android and Firefox the header and footer both change from fixed to in-line after dismissing the select. After tapping the screen, both the header and footer become fixed again and remain fixed if I tap again.

Hi I'm a colleague of @benwwest and I've just tested the fix on an Android Galaxy S3 (Android 4.04).

Here's an updated example using the latest JQM from the CDN http://jsbin.com/ixudew/12

It works in the native browser, though the select experience is quite different, but on Chrome for Android and Firefox the header and footer both change from fixed to in-line after dismissing the select. After tapping the screen, both the header and footer become fixed again and remain fixed if I tap again.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jan 24, 2013

Member

@JSkimming @benwwest

The problem seems to be that Chrome doesn't fire the focusout event when the select menu closes. You will see the button still has the focus style after the select menu has been closed. We bind to that event to bring the fixed toolbars back in view. I have to see if there is another event to bind to.

Member

jaspermdegroot commented Jan 24, 2013

@JSkimming @benwwest

The problem seems to be that Chrome doesn't fire the focusout event when the select menu closes. You will see the button still has the focus style after the select menu has been closed. We bind to that event to bring the fixed toolbars back in view. I have to see if there is another event to bind to.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jan 30, 2013

Member

Chrome only fires the change event. I wonder if this is something we can fix in the select widget. Binding the hideDuringFocus function to change is not an option since we have custom multiple selects.

Member

jaspermdegroot commented Jan 30, 2013

Chrome only fires the change event. I wonder if this is something we can fix in the select widget. Binding the hideDuringFocus function to change is not an option since we have custom multiple selects.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jan 31, 2013

Member

Changed the title. Was "Fixed footer moves when select opened"

Member

jaspermdegroot commented Jan 31, 2013

Changed the title. Was "Fixed footer moves when select opened"

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Feb 4, 2013

Member

@arschmitz and I looked into this (http://jsbin.com/ixudew/20/edit), but we need more time to test the solution so I set milestone 1.3.1 for this ticket.

Member

jaspermdegroot commented Feb 4, 2013

@arschmitz and I looked into this (http://jsbin.com/ixudew/20/edit), but we need more time to test the solution so I set milestone 1.3.1 for this ticket.

@JSkimming

This comment has been minimized.

Show comment
Hide comment
@JSkimming

JSkimming Feb 4, 2013

I've tested the patch (http://jsbin.com/ixudew/20/edit) on my Galaxy S3 (Android 4.04), and it has fixed the bug on both Chrome and Firefox.

We really appreciate the efforts, and understand why it'll have to wait for 1.3.1.

Many thanks.

I've tested the patch (http://jsbin.com/ixudew/20/edit) on my Galaxy S3 (Android 4.04), and it has fixed the bug on both Chrome and Firefox.

We really appreciate the efforts, and understand why it'll have to wait for 1.3.1.

Many thanks.

@poumpoum

This comment has been minimized.

Show comment
Hide comment
@poumpoum

poumpoum Apr 18, 2013

Hi everybody !

When I click on the select, the header and the footer disappear and the native list is popped :

  1. If I change the value of the select (->select another value than the one that was selected), the fixed header and the fixed footer appear again.
  2. If I don't change the value of the select (select the same value or click out of the list or click on the android back button), the fixed header and the fixed footer seem to move to the top and to the bottom of the entire page.

I use jquery-mobile 1.3.1 and I did this tests on :

  • Nexus 7(Chrome/Firefox)
  • HTC One X (Chrome)

->The behavior is the same.

Hi everybody !

When I click on the select, the header and the footer disappear and the native list is popped :

  1. If I change the value of the select (->select another value than the one that was selected), the fixed header and the fixed footer appear again.
  2. If I don't change the value of the select (select the same value or click out of the list or click on the android back button), the fixed header and the fixed footer seem to move to the top and to the bottom of the entire page.

I use jquery-mobile 1.3.1 and I did this tests on :

  • Nexus 7(Chrome/Firefox)
  • HTC One X (Chrome)

->The behavior is the same.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Apr 18, 2013

Member

@poumpoum

Can you provide a simple test page?

Member

jaspermdegroot commented Apr 18, 2013

@poumpoum

Can you provide a simple test page?

@poumpoum

This comment has been minimized.

Show comment
Hide comment
@poumpoum

poumpoum Apr 18, 2013

Here is an example (based on the original I've found here) http://jsbin.com/ixudew/33

Here is an example (based on the original I've found here) http://jsbin.com/ixudew/33

@JSkimming

This comment has been minimized.

Show comment
Hide comment
@JSkimming

JSkimming Apr 18, 2013

Hi I can confirm the same behaviour as described by @poumpoum on my Galaxy S3 with Chrome.

Hi I can confirm the same behaviour as described by @poumpoum on my Galaxy S3 with Chrome.

@jaspermdegroot jaspermdegroot reopened this May 3, 2013

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot May 3, 2013

Member

@poumpoum @JSkimming

I re-opened the ticket and will look into this.

Member

jaspermdegroot commented May 3, 2013

@poumpoum @JSkimming

I re-opened the ticket and will look into this.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot May 25, 2013

Member

#6028 might be a regression from the change that I made to fix this issue.

Member

jaspermdegroot commented May 25, 2013

#6028 might be a regression from the change that I made to fix this issue.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 6, 2015

Contributor

I've tested hideDuringFocus on an Android 4.1.2 AVD and it doesn't work very well. The toolbars do not unfix when you open the select and they unfix, briefly re-fix, and then unfix again afterwards. So, even if we disregard the brief flash of them being fixed, the end state is wrong, because after the select closes, the toolbars should be fixed, rather than static.

Contributor

gabrielschulhof commented Jan 6, 2015

I've tested hideDuringFocus on an Android 4.1.2 AVD and it doesn't work very well. The toolbars do not unfix when you open the select and they unfix, briefly re-fix, and then unfix again afterwards. So, even if we disregard the brief flash of them being fixed, the end state is wrong, because after the select closes, the toolbars should be fixed, rather than static.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 7, 2015

Contributor

@jaspermdegroot I've found the reason why: Android 4.1.2 blurs the selectmenu button when it opens the native menu, so the fixedToolbar receives focusin and focusout in quick succession. Both focusin and focusout attach .animationComplete() handlers, which can interfere with each other. I've filed #7902 wherein I fix the problem. It's not a fix for this issue, but it's a good branch to work on issues of interaction between fixed toolbars and selectmenus.

Contributor

gabrielschulhof commented Jan 7, 2015

@jaspermdegroot I've found the reason why: Android 4.1.2 blurs the selectmenu button when it opens the native menu, so the fixedToolbar receives focusin and focusout in quick succession. Both focusin and focusout attach .animationComplete() handlers, which can interfere with each other. I've filed #7902 wherein I fix the problem. It's not a fix for this issue, but it's a good branch to work on issues of interaction between fixed toolbars and selectmenus.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 7, 2015

Contributor

sigh Unfortunately, I think both #6028 and this issue stem from the fact that we have no way of knowing that the native selectmenu was closed.

Contributor

gabrielschulhof commented Jan 7, 2015

sigh Unfortunately, I think both #6028 and this issue stem from the fact that we have no way of knowing that the native selectmenu was closed.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 7, 2015

Contributor

Just to illustrate:

  1. Open http://jsbin.com/linine/1/ on Android 4.1.2
  2. open the selectmenu
  3. select a new item
    At this point, the toolbar is hidden.

http://jsbin.com/linine/2/ refers to the modified version from the branch for #7902, and behaves correctly.

Contributor

gabrielschulhof commented Jan 7, 2015

Just to illustrate:

  1. Open http://jsbin.com/linine/1/ on Android 4.1.2
  2. open the selectmenu
  3. select a new item
    At this point, the toolbar is hidden.

http://jsbin.com/linine/2/ refers to the modified version from the branch for #7902, and behaves correctly.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 7, 2015

Contributor

My Android 4.4.2 AVD works too.

Contributor

gabrielschulhof commented Jan 7, 2015

My Android 4.4.2 AVD works too.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 7, 2015

Contributor

Works on FF/Android 2.3.5 as well.

Contributor

gabrielschulhof commented Jan 7, 2015

Works on FF/Android 2.3.5 as well.

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Jan 7, 2015

Member

@gabrielschulhof pretty sure we already came to the conclusion its not possible for hideDurring focus to work everywhere on selectmenus and were going to drop this in 1.5?

Member

arschmitz commented Jan 7, 2015

@gabrielschulhof pretty sure we already came to the conclusion its not possible for hideDurring focus to work everywhere on selectmenus and were going to drop this in 1.5?

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 7, 2015

Contributor

Alright, I guess we can't fix this then.

Contributor

gabrielschulhof commented Jan 7, 2015

Alright, I guess we can't fix this then.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 8, 2015

Contributor

We have decided to remove the hideDuringFocus logic entirely, because we cannot implement it consistently. It is better to manually hide/show the fixed toolbars from your own application via the toolbar's hide() and show() methods, because the correct time to hide/show the toolbar must be determined per-application.

Contributor

gabrielschulhof commented Jan 8, 2015

We have decided to remove the hideDuringFocus logic entirely, because we cannot implement it consistently. It is better to manually hide/show the fixed toolbars from your own application via the toolbar's hide() and show() methods, because the correct time to hide/show the toolbar must be determined per-application.

@gabrielschulhof gabrielschulhof added this to the 1.5.0 milestone Jan 10, 2015

@gabrielschulhof gabrielschulhof self-assigned this Jan 10, 2015

gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Jan 10, 2015

gabrielschulhof added a commit that referenced this issue Jan 20, 2015

kapilgarg1996 added a commit to kapilgarg1996/jquery-mobile that referenced this issue Jun 27, 2015

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