Side navigation
#6652 closed enhancement (fixed)
Opened June 10, 2010 01:11AM UTC
Closed August 04, 2011 10:09PM UTC
Last modified March 09, 2012 05:03AM UTC
Remove filter:alpha(opacity=100) after animation
| Reported by: | Avorin | Owned by: | gnarf |
|---|---|---|---|
| Priority: | blocker | Milestone: | 1.6.3 |
| Component: | css | Version: | 1.4.2 |
| Keywords: | Internet,Explorer,opacity,1.7-discuss | Cc: | alexander.trefz@yahoo.de |
| Blocked by: | Blocking: |
Description
Internet Explorer renders some strange things(font, some backgrounds etc.) when filter: alpha(opacity=100) is applied(i.e. if opacity is animated to 1).
I have written a fix for that:
insert at Line 4603
if( style.filter === "alpha(opacity=100)" ) {
style.filter = "";
}
that removes the filter if the value is 100.
Attachments (0)
Change History (35)
Changed June 11, 2010 01:23AM UTC by comment:1
Changed November 10, 2010 04:35PM UTC by comment:3
| milestone: | 1.4.3 → 1.4.5 |
|---|---|
| priority: | → low |
| status: | new → open |
Changed November 17, 2010 05:11AM UTC by comment:5
| blockedby: | → 6841 |
|---|
Changed November 20, 2010 10:06PM UTC by comment:9
As touched upon in #6841, it is important that the filter only be removed if there is no existing filter in any stylesheets that will cascade and cause the opacity to reset back to where it was before.
Changed January 10, 2011 01:35PM UTC by comment:10
#7932 is a duplicate of this ticket.
Changed April 16, 2011 09:44PM UTC by comment:11
Let's consider this for 1.7.
Changed April 27, 2011 06:59PM UTC by comment:12
Note that in order to solve some bugs, the filter attribute should be removed completely, instead of set to an empty value.
Here is the jsFiddle containing the complete "plugin" that I include on all my sites to fix a clear type issue in IE7: http://jsfiddle.net/gWFx4/4/ - it removes the filter field if it is either empty or only has alpha(opacity=100)
Changed May 16, 2011 03:43PM UTC by comment:13
blocking jQuery UI bug http://bugs.jqueryui.com/ticket/4621
Changed May 22, 2011 07:27PM UTC by comment:14
| keywords: | Internet Explorer, opacity → Internet,Explorer,opacity,1.7-discuss |
|---|
Nominating ticket for 1.7 discussion.
Changed May 22, 2011 09:26PM UTC by comment:15
| description: | Internet Explorer renders some strange things(font, some backgrounds etc.) when filter: alpha(opacity=100) is applied(i.e. if opacity is animated to 1). \ \ I have written a fix for that: \ \ insert at Line 4603 \ \ if( style.filter === "alpha(opacity=100)" ) { \ style.filter = ""; \ } \ \ that removes the filter if the value is 100. \ \ → Internet Explorer renders some strange things(font, some backgrounds etc.) when filter: alpha(opacity=100) is applied(i.e. if opacity is animated to 1).\ \ I have written a fix for that:\ \ insert at Line 4603\ \ if( style.filter === "alpha(opacity=100)" ) {\ style.filter = "";\ }\ \ that removes the filter if the value is 100.\ \ |
|---|
+0, Scott proposed a better approach
Changed May 22, 2011 10:10PM UTC by comment:16
| description: | Internet Explorer renders some strange things(font, some backgrounds etc.) when filter: alpha(opacity=100) is applied(i.e. if opacity is animated to 1).\ \ I have written a fix for that:\ \ insert at Line 4603\ \ if( style.filter === "alpha(opacity=100)" ) {\ style.filter = "";\ }\ \ that removes the filter if the value is 100.\ \ → Internet Explorer renders some strange things(font, some backgrounds etc.) when filter: alpha(opacity=100) is applied(i.e. if opacity is animated to 1). \ \ I have written a fix for that: \ \ insert at Line 4603 \ \ if( style.filter === "alpha(opacity=100)" ) { \ style.filter = ""; \ } \ \ that removes the filter if the value is 100. \ \ |
|---|
My comments above may be mistaken, apparently _this_ was on the proposals list but scott also re-proposed it
Changed May 23, 2011 12:02AM UTC by comment:17
| description: | Internet Explorer renders some strange things(font, some backgrounds etc.) when filter: alpha(opacity=100) is applied(i.e. if opacity is animated to 1). \ \ I have written a fix for that: \ \ insert at Line 4603 \ \ if( style.filter === "alpha(opacity=100)" ) { \ style.filter = ""; \ } \ \ that removes the filter if the value is 100. \ \ → Internet Explorer renders some strange things(font, some backgrounds etc.) when filter: alpha(opacity=100) is applied(i.e. if opacity is animated to 1).\ \ I have written a fix for that:\ \ insert at Line 4603\ \ if( style.filter === "alpha(opacity=100)" ) {\ style.filter = "";\ }\ \ that removes the filter if the value is 100.\ \ |
|---|
-1, No matter what you do in the end, you'll have this strange rendering during the animation anyway, so I see little value in this.
Changed May 23, 2011 03:21AM UTC by comment:18
+1, If we can figure out a way to do this without presenting bugs, I think it is needed.
Changed May 23, 2011 05:21PM UTC by comment:19
| description: | Internet Explorer renders some strange things(font, some backgrounds etc.) when filter: alpha(opacity=100) is applied(i.e. if opacity is animated to 1).\ \ I have written a fix for that:\ \ insert at Line 4603\ \ if( style.filter === "alpha(opacity=100)" ) {\ style.filter = "";\ }\ \ that removes the filter if the value is 100.\ \ → Internet Explorer renders some strange things(font, some backgrounds etc.) when filter: alpha(opacity=100) is applied(i.e. if opacity is animated to 1). \ \ I have written a fix for that: \ \ insert at Line 4603 \ \ if( style.filter === "alpha(opacity=100)" ) { \ style.filter = ""; \ } \ \ that removes the filter if the value is 100. \ \ |
|---|
+1, look at all the dupes of this one. people hit this guy often, let's help 'em out
Changed May 23, 2011 09:37PM UTC by comment:20
+1, The nay is that stylesheet-imposed filters will then take effect but I agree with paul_irish that this is too common to ignore.
Changed June 03, 2011 01:31PM UTC by comment:21
| description: | Internet Explorer renders some strange things(font, some backgrounds etc.) when filter: alpha(opacity=100) is applied(i.e. if opacity is animated to 1). \ \ I have written a fix for that: \ \ insert at Line 4603 \ \ if( style.filter === "alpha(opacity=100)" ) { \ style.filter = ""; \ } \ \ that removes the filter if the value is 100. \ \ → Internet Explorer renders some strange things(font, some backgrounds etc.) when filter: alpha(opacity=100) is applied(i.e. if opacity is animated to 1).\ \ I have written a fix for that:\ \ insert at Line 4603\ \ if( style.filter === "alpha(opacity=100)" ) {\ style.filter = "";\ }\ \ that removes the filter if the value is 100.\ \ |
|---|
+0, This will allow the stylesheet filters to override the element (potentially making it hidden or partially visible) which seems unintended. While I agree that it looks bad in its end state and should look better, I'm not sure if the solution is really that good.
Changed June 03, 2011 01:52PM UTC by comment:22
Maybe we could add some sort of flag, like
jQuery.flags.restoreClearType = true
or something like this and then use it in the cssHook like that: http://jsfiddle.net/VCb5r/1/ (last "if")
so that users can enable this, when they know what this implies.
Also this way it could be disabled by default, so Backwards Compat does not get lost.
Changed June 05, 2011 08:31PM UTC by comment:23
| description: | Internet Explorer renders some strange things(font, some backgrounds etc.) when filter: alpha(opacity=100) is applied(i.e. if opacity is animated to 1).\ \ I have written a fix for that:\ \ insert at Line 4603\ \ if( style.filter === "alpha(opacity=100)" ) {\ style.filter = "";\ }\ \ that removes the filter if the value is 100.\ \ → Internet Explorer renders some strange things(font, some backgrounds etc.) when filter: alpha(opacity=100) is applied(i.e. if opacity is animated to 1). \ \ I have written a fix for that: \ \ insert at Line 4603 \ \ if( style.filter === "alpha(opacity=100)" ) { \ style.filter = ""; \ } \ \ that removes the filter if the value is 100. \ \ |
|---|
+1, but anonymous's idea above of allowing users to opt-in or out is a good one
Changed June 06, 2011 03:49PM UTC by comment:24
| description: | Internet Explorer renders some strange things(font, some backgrounds etc.) when filter: alpha(opacity=100) is applied(i.e. if opacity is animated to 1). \ \ I have written a fix for that: \ \ insert at Line 4603 \ \ if( style.filter === "alpha(opacity=100)" ) { \ style.filter = ""; \ } \ \ that removes the filter if the value is 100. \ \ → Internet Explorer renders some strange things(font, some backgrounds etc.) when filter: alpha(opacity=100) is applied(i.e. if opacity is animated to 1).\ \ I have written a fix for that:\ \ insert at Line 4603\ \ if( style.filter === "alpha(opacity=100)" ) {\ style.filter = "";\ }\ \ that removes the filter if the value is 100.\ \ |
|---|
+1
Changed June 18, 2011 06:59AM UTC by comment:25
| description: | Internet Explorer renders some strange things(font, some backgrounds etc.) when filter: alpha(opacity=100) is applied(i.e. if opacity is animated to 1).\ \ I have written a fix for that:\ \ insert at Line 4603\ \ if( style.filter === "alpha(opacity=100)" ) {\ style.filter = "";\ }\ \ that removes the filter if the value is 100.\ \ → Internet Explorer renders some strange things(font, some backgrounds etc.) when filter: alpha(opacity=100) is applied(i.e. if opacity is animated to 1). \ \ I have written a fix for that: \ \ insert at Line 4603 \ \ if( style.filter === "alpha(opacity=100)" ) { \ style.filter = ""; \ } \ \ that removes the filter if the value is 100. \ \ |
|---|
I'd be willing to try and tackle this one during the 1.7 phase if you guys want to assign it to me.
Changed June 18, 2011 03:16PM UTC by comment:26
| owner: | → gnarf |
|---|---|
| status: | open → assigned |
Changed June 20, 2011 09:44AM UTC by comment:27
https://github.com/jquery/jquery/pull/416 - This is what I managed to come up with after trying a few things that didn't work...
Setting filter to an empty string still causes the cleartype issues.
Changed June 20, 2011 10:01AM UTC by comment:28
http://jsfiddle.net/9rXBV/9/ - This is the fiddle I was using to test the fix
Changed June 30, 2011 08:31PM UTC by comment:29
Replying to [comment:30 gnarf]:
http://jsfiddle.net/9rXBV/9/ - This is the fiddle I was using to test the fix
I am able to reproduce this using alpha(opacity=70); ZOOM: 1. Does your solution handle that use case?
Changed June 30, 2011 10:16PM UTC by comment:30
Replying to [comment:31 whittet]:
I am able to reproduce this using alpha(opacity=70); ZOOM: 1. Does your solution handle that use case?
If you apply the alpha filter, ClearType will be removed... If it CAN remove the "filter" it does, if it can't (because there is already a filter in the CSS property) there is NOTHING we can do about it...
Changed July 12, 2011 02:51PM UTC by comment:31
| milestone: | 1.next → 1.7 |
|---|---|
| priority: | low → blocker |
Changed July 12, 2011 07:03PM UTC by comment:32
#8576 is a duplicate of this ticket.
Changed August 01, 2011 04:16PM UTC by comment:33
| milestone: | 1.7 → 1.6.3 |
|---|
Changed August 04, 2011 10:09PM UTC by comment:34
Changed November 13, 2011 10:19AM UTC by comment:35
This fix seems to have a regression on Symbian phones (tested on N8). When animating the opacity to 1, there is a JavaScript error
Error: Value undefined (result of expression style.removeAttribute) is not object
that is caused by the line
style.removeAttribute( "filter" );
The comment just above the offending line claims "style.removeAttribute is IE Only, but so apparently is this code path...", but apparently that code path is not IE only so one should be more mindful about the method availability.
See #3238 and #3502 for background.