949284 - (Midflorida.com) - Sign-in input not visible in Gecko due to WebKit CSS styling

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Kevin Duke]

Attachment: input checkbox bug.zip

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:25.0) Gecko/20100101 Firefox/25.0 (Beta/Release)
Build ID: 20131112160018

Steps to reproduce:

Visit www.midflorida.com. Click "Existing Customer? Login.". You will see the "Save Login ID:" thing that looks like an editbox, but it should contain a switch that lets you toggle between ON/OFF. This is really an <input type="checkbox">, but it doesn't even render. This works just fine in Chrome for Android.


Actual results:

The switch doesn't even render and I am unable to get this site to save my Login ID.


Expected results:

There should have been an ON/OFF switch that allows me to save my Login ID.

Comment 1

[Aaron Train [:aaronmt]]

Attachment: Chrome for Android.png

Comment 2

[Aaron Train [:aaronmt]]

Attachment: Firefox for Android.png

Comment 3

[Aaron Train [:aaronmt]]

<input id="RememberMe" name="RememberMe" type="checkbox" value="true">

media="screen"
#jqt .toggle input[type="checkbox"] {
/* -webkit-tap-highlight-color: rgba(0,0,0,0); */
margin: 0;
/* -webkit-border-radius: 5px; */
background: #fff url(img/on_off.png) 0 0 no-repeat;
height: 27px;
overflow: hidden;
width: 149px;
border: 0;
-webkit-appearance: textarea;
background-color: transparent;
-webkit-transition: left .15s;
position: absolute;
top: 0;
left: -55px;
}

When I change webkit-appearance to moz-appearance the field appears. 

The author of the website will need to consider that WebKit is not the only rendering engine available.

Comment 4

[Mike Taylor [:miketaylr]]

They're using jQTouch, https://m.midflorida.com/sso/Mobile/Content/jqtouch/jqtouch/jqtouch.android.css which comes from Sencha, "jQTouch is a JavaScript plugin which works with either Zepto.js or jQuery, and comes with smooth animations, navigation, and themes for mobile WebKit browsers"

To fix this the site is going to have to add multiple prefixed and unprefixed CSS props. It may also be worthwhile to create a fork of jQTouch that is x-browser friendly.

Comment 5

[Adam Stevenson [:adamopenweb]]

Contacted the marketing department via contact form on site:

Hi,

I'm working at Mozilla to solve web compatibility issues. We have noticed an issue with midflorida.com not working properly for some Mozilla Firefox mobile browsers. Could you please put me in contact with the right person within your organization to discuss the issue? This will likely be someone in Communications, Marketing or on a Technical team.

Thank you for your time,

Adam Stevenson
Mozilla

Comment 6

[Adam Stevenson [:adamopenweb]]

Left a voicemail with someone from Marketing.

Comment 7

[Adam Stevenson [:adamopenweb]]

No luck with getting contact so far.

Comment 8

[Karl Dubost💡 :karlcow]

This seems to be fixed. 
The button is visible