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.
Looks like this one: https://bugzilla.mozilla.org/show_bug.cgi?id=827890
Ah, thanks for noticing, that means it's not a jquery mobile bug at all.
I'll close this then.
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) */
-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!
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:
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).
the problem will occur. Same goes for when you use class
with 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 the
Seems like we should play it safe and remove the -moz rule for 1.3
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.
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.
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:
maybe we can leave the -moz line too. I've been playing with the rules order, and the below seems to work:
-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.
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.
Panel: make "-moz-transform: none;" override non-prefixed prop/val (F…
…F 16+). See #5753. Thanks @jaxtheking !