Skip to main content

Bug Tracker

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 dmethvin comment:1

See #3238 and #3502 for background.

Changed November 09, 2010 03:07AM UTC by snover comment:2

#7400 is a duplicate of this ticket.

Changed November 10, 2010 04:35PM UTC by SlexAxton comment:3

milestone: 1.4.31.4.5
priority: → low
status: newopen

Changed November 17, 2010 05:11AM UTC by snover comment:4

#3230 is a duplicate of this ticket.

Changed November 17, 2010 05:11AM UTC by snover comment:5

blockedby: → 6841

Changed November 19, 2010 10:37AM UTC by snover comment:6

#4779 is a duplicate of this ticket.

Changed November 19, 2010 11:11AM UTC by snover comment:7

#3901 is a duplicate of this ticket.

Changed November 20, 2010 10:03PM UTC by snover comment:8

#5676 is a duplicate of this ticket.

Changed November 20, 2010 10:06PM UTC by snover 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 jitter comment:10

#7932 is a duplicate of this ticket.

Changed April 16, 2011 09:44PM UTC by john comment:11

Let's consider this for 1.7.

Changed April 27, 2011 06:59PM UTC by Steven <jquery.good@lowbatteries.com> 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 scottgonzalez comment:13

blocking jQuery UI bug http://bugs.jqueryui.com/ticket/4621

Changed May 22, 2011 07:27PM UTC by john comment:14

keywords: Internet Explorer, opacityInternet,Explorer,opacity,1.7-discuss

Nominating ticket for 1.7 discussion.

Changed May 22, 2011 09:26PM UTC by rwaldron 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 rwaldron 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 jaubourg 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 timmywil 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 paul.irish 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 dmethvin 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 john 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 anonymous 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 ajpiano 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 jzaefferer 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 gnarf 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 timmywil comment:26

owner: → gnarf
status: openassigned

Changed June 20, 2011 09:44AM UTC by gnarf 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 gnarf 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 whittet 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 gnarf 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 dmethvin comment:31

milestone: 1.next1.7
priority: lowblocker

Changed July 12, 2011 07:03PM UTC by ajpiano comment:32

#8576 is a duplicate of this ticket.

Changed August 01, 2011 04:16PM UTC by john comment:33

milestone: 1.71.6.3

Changed August 04, 2011 10:09PM UTC by Dave Methvin comment:34

resolution: → fixed
status: assignedclosed

Merge pull request #416 from gnarf37/ticket_6652

CSS: Remove filter from style when setting opacity to 1 - Fixes #6652 - R

Changeset: 8d5c874227a65434a694b97148577fd4f93ab264

Changed November 13, 2011 10:19AM UTC by anonymous 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.