Skip to content
This repository

Error inside jquery.mobile.button.css #4413

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

5 participants

Alexander Nesterenko Mat Marquis Jasper de Groot Todd Parker Andrew Johnson
Alexander Nesterenko
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.
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
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.

Jasper de Groot
Owner
uGoMobi 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.

Jasper de Groot
Owner
uGoMobi 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.

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
Owner

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

Related issue: #3558

Alexander Nesterenko
Alexn commented June 08, 2012

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

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
Owner

@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
Alexn commented June 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.

Jasper de Groot
Owner

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

Jasper de Groot
Owner

@toddparker

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

Alexander Nesterenko
Alexn commented June 19, 2012

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

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

Jasper de Groot uGoMobi closed this in 07cc551 June 20, 2012
Alexander Nesterenko
Alexn commented June 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.

Ghislain Seguin gseguin referenced this issue from a commit in gseguin/jquery-mobile June 20, 2012
Jasper de Groot Fixes #4413 - Corrected invalid value for filter alpha opacity. 6a9152d
Elliot Smith townxelliot referenced this issue from a commit July 30, 2012
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.