Cannot remove clip CSS property from an element in IE

Reported by:	j@jonathanleighton.com	Owned by:	j@jonathanleighton.com
Priority:	undecided	Milestone:
Component:	unfiled	Version:	1.5.1
Keywords:		Cc:
Blocked by:		Blocking:

Description

Hi there,

For a demonstration try the following example in IE:

http://jsfiddle.net/p5Ckf/

IE will throw an exception when

el.style.clip = ''

is set (which I think jQuery is catching, but either way, the clip is not unset).

IE <= 8 also does not support el.style.removeProperty, so the only way that I have been able to successfully remove the clip property is like so:

el.attr('style', el.attr('style').replace(/clip\\: [^;]+;/i, ''))

(Eww.)

Note that you can set the clip property to 'auto'. This does not remove it, obviously, but can be useful in certain situations. Unfortunately in my use case I have descendent content with negative margins which still get clipped when clip is set to 'auto', so I really do need to remove the clip.

Thanks

Attachments (0)

Change History (7)

Changed March 30, 2011 07:08PM UTC by dmethvin comment:1

_comment0:	Use 'auto' instead of '', which is an invalid value for that property. → 1301512161706644
resolution:	→ invalid
status:	new → closed

Use 'auto' instead of '', which is an invalid value for that property.

Changed March 31, 2011 07:06AM UTC by j@jonathanleighton.com comment:2

Hi,

I take that point that the empty string is an invalid value when applied directly via el.style.clip.

However, the real point is that I am trying to do $(el).css('clip', ''), which according to the jQuery docs at http://api.jquery.com/css/, should work:

Setting the value of a style property to an empty string — e.g. $('#mydiv').css('color', '') — removes that property from an element

Setting the clip to auto has a different effect to removing the actual property completely - I explained this in my original post.

Please could you reopen the ticket?

Thanks

Changed April 15, 2011 04:08PM UTC by dmethvin comment:3

resolution:	invalid
status:	closed → reopened

Changed April 15, 2011 04:09PM UTC by dmethvin comment:4

owner:	→ j@jonathanleighton.com
status:	reopened → pending

I'm reopening this, mainly because I think it might need to be closed cantfix. Do you have a proposal for how to fix this? If so please post it in jsFiddle. Otherwise I am not sure anything can be done about it.

Changed April 15, 2011 05:13PM UTC by anonymous comment:5

Hi,

Thanks for reopening.

The regexp method in my original report will work. It's a nasty hack, but it works.

Jon

Changed April 15, 2011 05:15PM UTC by anonymous comment:6

For other browsers we should obviously use el.style.removeProperty('clip').

Changed April 17, 2011 10:55PM UTC by john comment:7

milestone:	1.next
resolution:	→ plugin
status:	pending → closed

This sounds like a good candidate for a plugin (using the new CSS Hook API).

Side navigation

#8584 closed bug (plugin)