Error inside jquery.mobile.button.css

[Alexn]

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.

[toddparker]

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?

[Alexn]

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.

[jaspermdegroot]

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.

[jaspermdegroot]

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

[toddparker]

@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.

[jaspermdegroot]

@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.

[jaspermdegroot]

Related issue: #3558

[Alexn]

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

[jaspermdegroot]

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!

[jaspermdegroot]

@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.

[Alexn]

@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.

[jaspermdegroot]

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

[jaspermdegroot]

@toddparker

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

[Alexn]

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

[Aetherpoint]

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.

[jaspermdegroot]

@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!

[Alexn]

@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.