Formalize.css breaks select elements on Chrome Android [#2721365]

When selecting an option from a select element, the Android select popup panel flashes briefly, disappears, then appears again. Making a selection does not select the item in the panel. The panel disappears, and the selection is not applied.

Disabling javascript in the browser allows a selection to be made, but obviously that is not a solution.

Switching theme to Responsive Bartik with javascript enabled also allows a selection to be made.

Android 5, Chrome browser

Comments

Comment #1

9 May 2016 at 00:28

John Pitcairn created an issue. See original summary.

Comment #2

John Pitcairn CreditAttribution: John Pitcairn commented 9 May 2016 at 00:32

Issue summary:

View changes

Comment #3

John Pitcairn CreditAttribution: John Pitcairn commented 9 May 2016 at 00:43

This appears to be caused by the Formalize library included in Omega. Disabling the library in theme settings fixes the problem.

Comment #4

John Pitcairn CreditAttribution: John Pitcairn commented 9 May 2016 at 01:24

Project:

Omega Kickstart

» Omega

In omega/css/formalize.css, the following is the culprit:

button:focus,
button:active,
input:focus,
input:active,
select:focus,
select:active,
textarea:focus,
textarea:active {
  -moz-box-shadow: #06f 0 0 7px;
  -webkit-box-shadow: #06f 0 0 7px;
  box-shadow: #06f 0 0 7px;
  z-index: 1; /* For Opera */
}

It seems that setting any rule on select:active will break the element in Chrome on Android. This makes the css rule impossible to override in subtheme global css. You need to swap out the entire formalize.css file in the subtheme .info file or via hook_css_alter().

Comment #5

John Pitcairn CreditAttribution: John Pitcairn commented 9 May 2016 at 01:25

Title:

Attribute selection not applied on Chrome Android

» Select element option selection not applied on Chrome Android

Comment #6

John Pitcairn CreditAttribution: John Pitcairn commented 9 May 2016 at 01:26

Issue summary:

View changes

Comment #7

John Pitcairn CreditAttribution: John Pitcairn commented 9 May 2016 at 03:18

Title:

Select element option selection not applied on Chrome Android

» Formalize.css breaks select elements on Chrome Android

Comment #8

John Pitcairn CreditAttribution: John Pitcairn commented 9 May 2016 at 03:50

This is probably related to there not being an :active pseudo-class available in Chrome for Android. There is, I think, a bug filed against Chrome for that, but I don't recall there being any mention of any adverse effect if such a rule is applied.