Bug Tracker

Ticket #6652 (closed enhancement: fixed)

Opened 4 years ago

Last modified 3 years ago

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@…
Blocking: Blocked by: #6841

Description (last modified by gnarf) (diff)

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.

Change History

comment:1 Changed 4 years ago by dmethvin

See #3238 and #3502 for background.

comment:2 Changed 4 years ago by snover

#7400 is a duplicate of this ticket.

comment:3 Changed 4 years ago by SlexAxton

  • Priority set to low
  • Status changed from new to open
  • Milestone changed from 1.4.3 to 1.4.5

comment:4 Changed 4 years ago by snover

#3230 is a duplicate of this ticket.

comment:5 Changed 4 years ago by snover

  • Blocked by 6841 added

comment:8 Changed 4 years ago by snover

#4779 is a duplicate of this ticket.

comment:9 Changed 4 years ago by snover

#3901 is a duplicate of this ticket.

comment:10 Changed 4 years ago by snover

#5676 is a duplicate of this ticket.

comment:11 Changed 4 years ago by snover

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.

comment:12 Changed 4 years ago by jitter

#7932 is a duplicate of this ticket.

comment:13 Changed 4 years ago by john

Let's consider this for 1.7.

comment:14 Changed 4 years ago by Steven <jquery.good@…>

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)

comment:15 Changed 3 years ago by scott.gonzalez

comment:16 Changed 3 years ago by john

  • Keywords Internet,Explorer,opacity,1.7-discuss added; Internet Explorer, opacity removed

Nominating ticket for 1.7 discussion.

comment:17 Changed 3 years ago by rwaldron

  • Description modified (diff)

+0, Scott proposed a better approach

comment:18 Changed 3 years ago by rwaldron

  • Description modified (diff)

My comments above may be mistaken, apparently _this_ was on the proposals list but scott also re-proposed it

comment:19 Changed 3 years ago by jaubourg

  • Description modified (diff)

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

comment:20 Changed 3 years ago by timmywil

+1, If we can figure out a way to do this without presenting bugs, I think it is needed.

comment:21 Changed 3 years ago by paul.irish

  • Description modified (diff)

+1, look at all the dupes of this one. people hit this guy often, let's help 'em out

comment:22 Changed 3 years ago by dmethvin

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

comment:23 Changed 3 years ago by john

  • Description modified (diff)

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

comment:24 Changed 3 years ago by anonymous

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.

comment:25 Changed 3 years ago by ajpiano

  • Description modified (diff)

+1, but anonymous's idea above of allowing users to opt-in or out is a good one

comment:26 Changed 3 years ago by jzaefferer

  • Description modified (diff)

+1

comment:27 Changed 3 years ago by gnarf

  • Description modified (diff)

I'd be willing to try and tackle this one during the 1.7 phase if you guys want to assign it to me.

comment:28 Changed 3 years ago by timmywil

  • Owner set to gnarf
  • Status changed from open to assigned

comment:29 Changed 3 years ago by gnarf

 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.

comment:30 follow-up: ↓ 31 Changed 3 years ago by gnarf

 http://jsfiddle.net/9rXBV/9/ - This is the fiddle I was using to test the fix

comment:31 in reply to: ↑ 30 ; follow-up: ↓ 32 Changed 3 years ago by whittet

Replying to 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?

comment:32 in reply to: ↑ 31 Changed 3 years ago by gnarf

Replying to 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...

comment:33 Changed 3 years ago by dmethvin

  • Priority changed from low to blocker
  • Milestone changed from 1.next to 1.7

comment:34 Changed 3 years ago by ajpiano

#8576 is a duplicate of this ticket.

comment:35 Changed 3 years ago by john

  • Milestone changed from 1.7 to 1.6.3

comment:34 Changed 3 years ago by Dave Methvin

  • Status changed from assigned to closed
  • Resolution set to fixed

Merge pull request #416 from gnarf37/ticket_6652

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

Changeset: 8d5c874227a65434a694b97148577fd4f93ab264

comment:35 Changed 3 years ago by anonymous

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.

Note: See TracTickets for help on using tickets.