New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error inside jquery.mobile.button.css #4413

Closed
Alexn opened this Issue May 21, 2012 · 17 comments

Comments

Projects
None yet
5 participants
@Alexn

Alexn commented May 21, 2012

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.

@ghost ghost assigned Wilto and jaspermdegroot May 21, 2012

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker May 24, 2012

Contributor

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?

Contributor

toddparker commented May 24, 2012

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

This comment has been minimized.

Show comment
Hide comment
@Alexn

Alexn May 24, 2012

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.

Alexn commented May 24, 2012

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot May 26, 2012

Member

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.

Member

jaspermdegroot commented May 26, 2012

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot May 31, 2012

Member

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

Member

jaspermdegroot commented May 31, 2012

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

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Jun 8, 2012

Contributor

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

Contributor

toddparker commented Jun 8, 2012

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

@ghost ghost assigned jaspermdegroot Jun 8, 2012

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 8, 2012

Member

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

Member

jaspermdegroot commented Jun 8, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 8, 2012

Member

Related issue: #3558

Member

jaspermdegroot commented Jun 8, 2012

Related issue: #3558

@Alexn

This comment has been minimized.

Show comment
Hide comment
@Alexn

Alexn Jun 8, 2012

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

Alexn commented Jun 8, 2012

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

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 8, 2012

Member

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!

Member

jaspermdegroot commented Jun 8, 2012

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 19, 2012

Member

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

Member

jaspermdegroot commented Jun 19, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@Alexn

Alexn Jun 19, 2012

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

Alexn commented Jun 19, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 19, 2012

Member

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

Member

jaspermdegroot commented Jun 19, 2012

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

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 19, 2012

Member

@toddparker

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

Member

jaspermdegroot commented Jun 19, 2012

@toddparker

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

@Alexn

This comment has been minimized.

Show comment
Hide comment
@Alexn

Alexn Jun 19, 2012

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

Alexn commented Jun 19, 2012

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

@Aetherpoint

This comment has been minimized.

Show comment
Hide comment
@Aetherpoint

Aetherpoint Jun 20, 2012

Contributor

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.

Contributor

Aetherpoint commented Jun 20, 2012

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 20, 2012

Member

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

Member

jaspermdegroot commented Jun 20, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@Alexn

Alexn Jun 21, 2012

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

Alexn commented Jun 21, 2012

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

gseguin pushed a commit to gseguin/jquery-mobile that referenced this issue Jun 27, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment