FF 19.x and native select in panel on Mac OSX mouse select option issue #5753

Closed
msegers opened this Issue Mar 11, 2013 · 9 comments

Projects

None yet

5 participants

@msegers
msegers commented Mar 11, 2013

Tested on multiple Mac systems (destkop) in combination with Firefox 19.
Using jquery mobile 1.3.0

When you have a select in your panel it becomes unclickable, hovering options works and selecting them using the enter key works aswell, clicking however does not.
Seems that it came with the release of FF 19 last thursday.

example jsfiddle
http://jsfiddle.net/QhdQG/2/

@msegers
msegers commented Mar 12, 2013

Ah, thanks for noticing, that means it's not a jquery mobile bug at all.
I'll close this then.

@msegers msegers closed this Mar 12, 2013
@jaxtheking

The bug does depend on Firefox on Mac and it's not a jQM bug but I believe to have found a workaround for it.
The issue report states that a select is not clickable when any of its containing element is assigned a 3d transform.
In jQM's CSS, the open panels are assigned a transform:translate3d(0,0,0) which is still a 3d transform nevertheless for FF.
If you change that to transform:none nothing seems to change in the way the panel operate, but the select input in it does work!

Here's what worked for me for the right panel, around line 3125 for me:

  /* animated: panel right open (for overlay and push) */
  .ui-panel-animate.ui-panel-position-right.ui-panel-open.ui-panel-display-overlay,
  .ui-panel-animate.ui-panel-position-right.ui-panel-open.ui-panel-display-push {
    -webkit-transform: none; /* was translate3d(0,0,0) */
    -moz-transform: none; /* was translate3d(0,0,0) */
    transform: none; /* was translate3d(0,0,0) */
  }

Hope this helps anyone!

@jaspermdegroot
Member

@jaxtheking

Thanks for your post!

Changing this setting for WebKit browsers might cause blinks, but since it's a Firefox issue you could just set -moz-transform: none;.

The same for a left panel:

.ui-panel-animate.ui-panel-position-left.ui-panel-open.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-left.ui-panel-open.ui-panel-display-push {
    -moz-transform: none;
}

Going to test this. If there is no downside we can land this solution in 1.3.1.

I suppose the bug will also appear when you have a select in the page content. By default option dismissible is set to true so you can't interact with the page anyway while the panel is open. But when you set this to false the problem will occur. Same goes for when you use classui-responsive-panelwith a push panel, because in that case we hide the dismiss layer that prevents interaction at wider screens. We can't fix this because in this case thetransformistranslate3d(17em,0,0)``` (or -17em).

@toddparker
Contributor

Seems like we should play it safe and remove the -moz rule for 1.3

@jaspermdegroot jaspermdegroot added a commit that closed this issue Mar 27, 2013
@jaspermdegroot jaspermdegroot Panel: Unset transform translate3d for FF where possible. Fixes #5753.
We don't need translate3d(0,0,0) for hardware acceleration in case of FF and it causes problems with selects due to a FF bug.
88d5980
@jaspermdegroot jaspermdegroot added a commit that referenced this issue Mar 27, 2013
@jaspermdegroot jaspermdegroot Panel: Unset transform translate3d for FF where possible. Fixes #5753.
We don't need translate3d(0,0,0) for hardware acceleration in case of FF and it causes problems with selects due to a FF bug.
184ad8e
@msegers
msegers commented Mar 27, 2013

Thnx bro

@toddparker
Contributor

We just did a bunch of tests and this seems like a FF regression only on Mac for version 19. Version 19.0.2 on PC is fine, but on Mac the same version results in un-selectable menu items.
http://jsfiddle.net/aDCfD/

We've removed the -moz rules but I think newer FF versions use the non-prefixed properties so this may not fix the issue on all versions. Mozilla just need to fix this bug. Please upvote:
https://bugzilla.mozilla.org/show_bug.cgi?id=827890

@jaxtheking

Hi Todd,
maybe we can leave the -moz line too. I've been playing with the rules order, and the below seems to work:

.ui-panel-animate.ui-panel-position-right.ui-panel-open.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-right.ui-panel-open.ui-panel-display-push {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -moz-transform: none; /* Luca: was translate3d(0,0,0) */
}

I believe - correct me if I'm wrong - that the recent FFs would use the -webkit rule and ignore the -moz one if loaded in this order. I tested it quite a bit and this finally seems to work.

@jaspermdegroot
Member

@jaxtheking

Firefox doesn't use the -webkit prefix, but the override works the other way around. So this seems like a good solution. FF 16+ that supports the non-prefixed will still support the -moz prefix as well I suppose. By putting the -moz property after the non-prefixed one it will override the value we set there. Going to change this for 1.3.1.

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