css('clip-path', ..) not working

[mattdesl]

(using jQuery 2.1.4)

I have the following code:

$(div).css('clip-path', 'polygon(50% 0%, 0% 100%, 100% 100%)')

However, it does not prefix the clip-path style. The following works:

$(div).css('-webkit-clip-path', 'polygon(50% 0%, 0% 100%, 100% 100%)')

It seems like this rule (and maybe others?) only works in Chrome with a vendor prefix. However, since the following is true, the css() method assumes that the non-prefix style should work:

('clipPath' in div.style) === true

[mgol]

Confirmed: http://jsfiddle.net/ha3amksf/1/. Thanks for the report. This works in Safari 8, only Chrome 43 is broken.

Good news is Chrome 44 stable went out today. :) And the bug is fixed there. So I don't think there's anything for us to do here unless there are other properties that don't work in this way - if you know about sth like that, please let us know & I'll reopen.

[mgol]

Sorry, I was mistaken, it's still broken: http://jsfiddle.net/ha3amksf/5/. My test case was borked.

[mattdesl]

In my own tests I am seeing similar problems with 'writingMode' and 'filter', where only the prefixed versions work but the un-prefixed forms are getting picked up. Still on Chrome 43, will test 44.

[mgol]

I'm not sure what to do here; can you open a Chrome issue at https://crbug.com and link to it from here? If prefixed & non-prefixed property accept different syntaxes there's not a lot we can do as we only check for properties; checking if a value was applied properly and falling back to a prefixed property would be too error prone.

A workaround for now would be to invoke .css('-webkit-clip-path', 'polygon(50% 0%, 0% 100%, 100% 100%)') directly. Be aware, though, that jQuery 1.11.3 & 2.1.4 have a bug with using the .css setter on a vendor-prefixed property; it's fixed on master & will be included in jQuery 3.0.0: #2015. Be sure to use the non-prefixed setter first and the prefixed one second to avoid this bug.

[mattdesl]

done: https://code.google.com/p/chromium/issues/detail?id=512502&thanks=512502&ts=1437501499

[mgol]

Thanks! Let's see what they say.

[mgol]

I'm going to close it since I don't see a way to work around it in jQuery without introducing bugs and decreasing performance of the .css() setter overall. Hopefully there are not a lot of CSS properties that suffer from such behavior and a workaround is not hard.

[mgol]

Thanks for reporting anyway. :)