Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Error inside jquery.mobile.button.css #4413

Closed
Alexn opened this Issue · 17 comments

5 participants

Alexander Nesterenko Todd Parker Jasper de Groot Andrew Johnson Mat Marquis
Alexander Nesterenko

File haves error inside .ui-btn-hidden ruleset

.ui-btn-hidden { /*...*/ opacity: .1; /*...*/ filter: Alpha(Opacity=.0001); /*...*/ }

The value .0001 isn't valid for the Opacity. An element with css class ui-btn-hidden is transparent only in IE.

For full transparent need:

  • set property opacity to 0;
  • set parameter Opacity to 0.
Mat Marquis Wilto was assigned
Todd Parker

I'm pretty sure we had to set the opacity to a non-zero value to make a particular browser happy, maybe Opera? @scottjehl - do you remember?

Alexander Nesterenko

opacity valid range - 0 to 1, Alpha(Opacity) valid range - 0 to 100. If you had to set opacity to 10% you need change

filter: Alpha(Opacity=.0001);

to

filter: Alpha(Opacity=10);

IMHO, the name ui-btn-hidden is incorrect for a non hidden elements.

Jasper de Groot

I agree with @Alexn that .0001 is invalid and that the value should be 10 if we want it to be the same as the opacity property that is set to 0.1 for browsers other than IE/WP (Opera uses opacity property, not filter).

This property/value has been added with commit 26831aa by @Wilto. That commit solved issues with non responsive buttons, but issue #2743 is about this still being a problem on IE. Could be related to this invalid value.

Mat Marquis Wilto was assigned
Jasper de Groot

We probably need to add -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=10)"; as well, like we do for ui-disabled.

Todd Parker

@uGoMobi - let's whip up a test page with your suggestions and we can run it through our test lab to patch this up. Really wish there was a comment on that .0001 opacity property - it must be there for some real reason, it's too odd.

Jasper de Groot

@toddparker - I will set up a test page.

BTW - I found an opacity: 0.0001 (not IE!) rule somewhere in the code as well. That's probably invalid too, but maybe not causing an issue. Will look at commit messages if I see a clarification.

Jasper de Groot

Related issue: #3558

Alexander Nesterenko

@uGoMobi - .foo{ opacity : 0.0001; } is valid value, IMHO 0.0001 is very strange value, because it is very close to zero!

Jasper de Groot

hi @Alexn

Thanks for the info! I know it looks strange but it is used to hide a button but still keep its functionality. Background transparent and opacity 0 didn't work for some reason so I suppose that's why we want to use the lowest possible opacity.

Maybe it is all just a mistake and has the value for IE's filter alpha opacity been copied from that opacity property. Not sure why that is set to .1 at one place and .0001 at another. Digging into it!

Jasper de Groot

@Alexn

I have been looking into this.

About class ui-btn-hidden: We add this class to the native button element which should be a fully transparent layar above the JQM styled button, so we keep its functionally but it is invisible.
Since it lost its functionally on some browsers when we used background: transparent; we switched to opacity: 10; and set the background-color to rgba(255,255,255,0).
Older IE browsers don't support rgba so we had to set the background-color to #FFF for those. With filter: Alpha(Opacity=10); you would see a semi white layar above all buttons on IE browsers. That's why we set it to filter: Alpha(Opacity=.0001);

On MSDN it says valid values are 0 to 100 so 0.0001 appears to be invalid. At the other hand, I didn't see IE throwing any errors/warnings and there are no issues with validation. The debug tool showed a value of 0 for the opacity so it looks like IE just rounds off.

I tested if it works with filter: Alpha(Opacity=0); as well and that seems to be the case. I haven't test this on Windows Phone though. I know there have been strange issues with WP Mango and opacity (see 01c77fa) so we have to be careful with changing things. We will test on WP and if it is not causing any problems we can change the value to 0.

I also checked if we need to add -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=.0001)"; but this seems not necessary.

Alexander Nesterenko

@uGoMobi

The debug tool showed a value of 0 for the opacity so it looks like IE just rounds off.

MSDN says:

The property is read/write. The property has a default value of 0.

iOpacity Integer that specifies or receives the opacity level.

The value can range from 0 (fully transparent) to 100 (fully opaque).
0 Default. Transparent.
100 Opaque.

0.0001 is not Interger and IMHO IE uses default value - 0.

Jasper de Groot

@Alexn - I missed that "integer" part. So I think you are right about IE just using default.

Jasper de Groot

@toddparker

Can you have this tested on Windows Phone? http://ugomobi.github.com/ie-button/
The buttons should trigger an alert.
Thanks!

Alexander Nesterenko

@uGoMobi I tested on WP7.5. All buttons from "New" work as well as from "Currently".

Andrew Johnson

LG Optimus 7 - WP 7 - All Buttons Work, New and Currently
Trophy - WP 7.5 - All Buttons Work, New and Currently
Nokia Lumai 800 - WP 7.5 - All Buttons Work, New and Currently
HD2/LEO Windows Mobile 6.5 - Input Button does not work on both new and currently.

Jasper de Groot

@Aetherpoint - Thanks for testing Andrew!

Windows Mobile 6.5 is C-grade so I guess there is nothing we can do to make it work. Anyway, that's not related to this change.

@Alexn - I am going to change the value to 0. Thanks for reporting this and all your useful comments!

Alexander Nesterenko

@uGoMobi The ReSharper found this error. Another issues from this project here. You can get ReSharper license for this (open source) project without any fee.

Elliot Smith townxelliot referenced this issue from a commit
Commit has since been removed from the repository and is no longer available.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.