Be cautious with 'display: none' style

Most of the time, we use display: none property to hide the elements from out HTML page.

Reference: http://www.w3schools.com/css/css_display_visibility.asp

But this property might make you bang your head, if you are adding any event to the elements having this property.

Yeah, recently we faced some strange issue in our ember-application.

We have a image-upload feature in application. For that we have added a button "Add Image" and a file input. The file input we kept hidden and on click of the button "Add Image", we were triggering click event on file input.

# Ember action called on click of button "Add Image"
triggerUpload: function() {
  Ember.$("input[type='file']").trigger("click");
},

.

# Style applied to file input:
input[type='file'] {
   display: none;
}

It was working fine in all the web-browsers, but when we run the ember-cordova app in mobile, it started giving issue.

In Android (version: 4.2.2), nothing was happening when we click button "Add Image". It was triggering triggerUpload action, but file input was not getting clicked.

We were clueless, why it was not working in that specific Android version, is it Android version issue or something else??

Later while debugging, when we removed display: none; style from file input, it started working properly. File input style was causing that issue.

Now we changed, styles as follows:

# Style applied to file input:
input[type='file'] {
  opacity: 0;
  height: 0;
  z-index: -100;
  width: 0;
  position: absolute;
}

Being a developer, we sometimes only look into code if we face any issues and overlook the styles. So it's a time to have handshake with styles ;)