Skip to content
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.

Sign up for GitHub

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

Jump to bottom

setStyle('opacity',1) can't work properly #1469

Closed
zxj opened this issue Dec 7, 2013 · 9 comments
Closed

setStyle('opacity',1) can't work properly #1469

zxj opened this issue Dec 7, 2013 · 9 comments
Assignees
@okuryu
Labels
bug
Milestone
Sprint 12 Code Fr...

Comments

@zxj
Copy link

zxj commented Dec 7, 2013

In IE6 or IE7 ,if "filter:alpha(opacity=0)" defined in external css files or defined in interanl css block,then use setStyle('opacity',1) will not work properly.

<!DOCTYPE html>
<html>
<head>
    <title>Test setStyle method</title>
    <script src="http://yui.yahooapis.com/3.14.0/build/yui/yui-min.js"></script>
    <style type="text/css">
    .demo-cls{
        width:100px;
        height: 100px;
        background-color: #999;
        opacity:1;
        filter:alpha(opacity=100);
    }
    </style>
</head>
<body>
<div class="demo-cls"></div>
<button id="J_Btn">Toggle Opacity</button>
<script type="text/javascript">
    YUI().use("node",function(Y){
        var toggleBtn=Y.one("#J_Btn"),
            toggle=true,
            opacity=0,
            demoPlace=Y.one(".demo-cls");
        toggleBtn.on("click",function(e){
            opacity=toggle?0:1;
            toggle=!toggle;
            demoPlace.setStyle("opacity",opacity);//in ie6 or ie7 will can't work properly
        })
    })
</script>
</body>
</html>
@zxj
Copy link
Author

zxj commented Dec 7, 2013

at 236 line of "dom-style-ie.js"

Error

if (typeof currentFilter == 'string') { // in case not appended
                style[FILTER] = currentFilter.replace(/alpha([^)]*\))/gi, '') +
                        ((val < 1) ? 'alpha(' + OPACITY + '=' + val * 100 + ')' : '');   // error

Correct

if (typeof currentFilter == 'string') { // in case not appended
                style[FILTER] = currentFilter.replace(/alpha([^)]*\))/gi, '') +
                        ((val <= 1) ? 'alpha(' + OPACITY + '=' + val * 100 + ')' : '');

@ghost ghost assigned okuryu Dec 7, 2013
@okuryu
Copy link
Member

okuryu commented Dec 7, 2013

Thank you for your report! I'll looking into this.

@okuryu
Copy link
Member

okuryu commented Dec 7, 2013

@zxj I'm not able to reproduce this problem on IE6. Could you put reproducible example code?

@zxj
Copy link
Author

zxj commented Dec 7, 2013

@okuryu thank you for your processing

please run below example code on IE6 or IE7.

<!DOCTYPE html>
<html>
<head>
    <title>Test setStyle method</title>
    <script src="http://yui.yahooapis.com/3.14.0/build/yui/yui-min.js"></script>
    <style type="text/css">
    .demo-cls{
        width:100px;
        height: 100px;
        background-color: #999;
        opacity:1;
        filter:alpha(opacity=100);
    }
    </style>
</head>
<body>
<div class="demo-cls"></div>
<button id="J_Btn">Toggle Opacity</button>
<script type="text/javascript">
    YUI().use("node",function(Y){
        var toggleBtn=Y.one("#J_Btn"),
            toggle=true,
            opacity=0,
            demoPlace=Y.one(".demo-cls");
        toggleBtn.on("click",function(e){
            opacity=toggle?0:1;
            toggle=!toggle;
            demoPlace.setStyle("opacity",opacity);//in ie6 or ie7 will can't work properly
        })
    })
</script>
</body>
</html>

Please pay attention to "dom-style-ie.js" file, in line 236.

@zxj
Copy link
Author

zxj commented Dec 8, 2013

https://github.com/yui/yui3/blob/master/src/dom/js/dom-style-ie.js#L236

@okuryu
Copy link
Member

okuryu commented Dec 8, 2013

Chrome:
3013a9fe3c9644a0e44c9411383b82b2
IE6:
d88376a04c8dc4e9df4ee660d7b196ab
IE7:
30d9d6d1c8b30689c265ab19f5472b98

@zxj
Copy link
Author

zxj commented Dec 12, 2013

@okuryu please run below example code.

<!DOCTYPE html>
<html>
<head>
    <title>Test setStyle method</title>
    <script src="http://yui.yahooapis.com/3.14.0/build/yui/yui-min.js"></script>
    <style type="text/css">
    .demo-cls{
        width:100px;
        height: 100px;
        background-color: #999;
        opacity:0;     //init value is 0,not 1
        filter:alpha(opacity=0);
    }
    </style>
</head>
<body>
<div class="demo-cls"></div>
<button id="J_Btn">Toggle Opacity</button>
<script type="text/javascript">
    YUI().use("node",function(Y){
        var toggleBtn=Y.one("#J_Btn"),
            toggle=true,
            opacity=0,
            demoPlace=Y.one(".demo-cls");
        toggleBtn.on("click",function(e){
            opacity=toggle?1:0;
            toggle=!toggle;
            demoPlace.setStyle("opacity",opacity);   //in ie6 or ie7 will can't work properly
        })
    })
</script>
</body>
</html>

Thanks

@okuryu
Copy link
Member

okuryu commented Dec 12, 2013

@zxj Thanks! I could reproduce your problem. I'll work to fix the code and test case ASAP.

okuryu added a commit to okuryu/yui3 that referenced this issue Dec 13, 2013
@okuryu
Fix a bug with setStyle() cannot set an opacity to 1
b2131ad 
This problem occurs when you try to set an opacity to 1 using node.setStyle()
method on IE. It has adapted to change an opacity only if less than 1, but we
should change an opacity, even if it passed 1. Fix yui#1469.
@okuryu okuryu mentioned this issue Dec 13, 2013
Closed
okuryu added a commit that referenced this issue Dec 14, 2013
@okuryu
Fix a bug with setStyle() cannot set an opacity to 1
95c52dc 
This problem occurs when you try to set an opacity to 1 using node.setStyle()
method on IE. It has adapted to change an opacity only if less than 1, but we
should change an opacity, even if it passed 1. Fix #1469.
okuryu added a commit that referenced this issue Dec 14, 2013
@okuryu
Fix a bug with setStyle() cannot set an opacity to 1
bd487b3 
This problem occurs when you try to set an opacity to 1 using node.setStyle()
method on IE. It has adapted to change an opacity only if less than 1, but we
should change an opacity, even if it passed 1. Fix #1469.
@okuryu
Copy link
Member

okuryu commented Dec 14, 2013

Landed 95c52dc. It will be available in near future release.

@okuryu okuryu closed this as completed Dec 14, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@okuryu okuryu

Labels
bug
Projects
None yet
Milestone
Sprint 12 Code Freeze
Development

No branches or pull requests
2 participants
@okuryu @zxj