Css: Restore the previous style if the new one is rejected #1532

Closed
wants to merge 1 commit into
from

Projects

None yet

5 participants

@mgol
Member
mgol commented Mar 10, 2014

The workaround to be able to change !important styles broke the browser
keeping the old CSS value if the new one was rejected. Revert to the old
value explicitly in such a case.

Bug report: http://bugs.jquery.com/ticket/14836

+29 bytes

@mgol mgol added a commit to mgol/jquery that referenced this pull request Mar 10, 2014
@mgol mgol Css: Restore the previous style if the new one is rejected
The workaround to be able to change !important styles broke the browser
keeping the old CSS value if the new one was rejected. Revert to the old
value explicitely in such a case.

Fixes #14836
Closes gh-1532
8d29eca
@mgol mgol added a commit to mgol/jquery that referenced this pull request Mar 10, 2014
@mgol mgol Css: Restore the previous style if the new one is rejected
The workaround to be able to change !important styles broke the browser
keeping the old CSS value if the new one was rejected. Revert to the old
value explicitely in such a case.

Fixes #14836
Closes gh-1532
7805567
@mgol mgol added a commit to mgol/jquery that referenced this pull request Mar 10, 2014
@mgol mgol Css: Restore the previous style if the new one is rejected
The workaround to be able to change !important styles broke the browser
keeping the old CSS value if the new one was rejected. Revert to the old
value explicitely in such a case.

Fixes #14836
Closes gh-1532
28aa986
@mgol mgol added a commit to mgol/jquery that referenced this pull request Mar 10, 2014
@mgol mgol Css: Restore the previous style if the new one is rejected
The workaround to be able to change !important styles broke the browser
keeping the old CSS value if the new one was rejected. Revert to the old
value explicitely in such a case.

Fixes #14836
Closes gh-1532
3967056
@mgol mgol added a commit to mgol/jquery that referenced this pull request Mar 10, 2014
@mgol mgol Css: Restore the previous style if the new one is rejected
The workaround to be able to change !important styles broke the browser
keeping the old CSS value if the new one was rejected. Revert to the old
value explicitly in such a case.

Fixes #14836
Closes gh-1532
c947015
@mgol
Member
mgol commented Mar 10, 2014

This slows down the .css() setter by about 33%: http://jsperf.com/style-versus-jquery-css/32

@mgol mgol Css: Restore the previous style if the new one is rejected
The workaround to be able to change !important styles broke the browser
keeping the old CSS value if the new one was rejected. Revert to the old
value explicitly in such a case.

Fixes #14836
Closes gh-1532
d25bf1f
@dmethvin
Member

How about we just back this out and call the problem a wontfix? Bigger and slower isn't a good combination, and !important isn't a critical feature to support.

@mgol
Member
mgol commented Mar 10, 2014

+1

I don't like this hack either, let's just advocate to get it fixed upstream
(it's Chrome, Safari & IE, doh; only Fx got it right).

Michał Gołębiowski

@gibson042
Member

+1

@mgol mgol added a commit that closed this pull request Mar 10, 2014
@mgol mgol Css: Revert 24e5879
The workaround to be able to change !important styles broke the browser
keeping the old CSS value if the new one was rejected. Patching it would
involve a significant perf hit (~33%) so the initial patch needs to be
reverted instead.

Tests by m_gol & gibson042.

Fixes #14836
Closes gh-1532
2c180ef
@mgol mgol closed this in 2c180ef Mar 10, 2014
@mgol
Member
mgol commented Mar 10, 2014

Closed in favor of 2c180ef

@mgol mgol deleted the mgol:#14836-cascade branch Mar 10, 2014
@mgol mgol added a commit that referenced this pull request Mar 10, 2014
@mgol mgol Css: Revert 24e5879
The workaround to be able to change !important styles broke the browser
keeping the old CSS value if the new one was rejected. Patching it would
involve a significant perf hit (~33%) so the initial patch needs to be
reverted instead.

Tests by m_gol & gibson042.

(cherry-picked from 10e6542)

Fixes #14836
Closes gh-1532
4a6d163
@meetselva
style[ name ] = "";
style[ name ] = value;

The above was also triggering MutationObserver callback twice for every .css(..) call as the attribute was modified twice. Thanks for the fix.

@mikesherov
Member

(it's Chrome, Safari & IE, doh; only Fx got it right).

I know I'm super late to the party here, but actually FF is the only one who got it wrong.

According to the spec, using either style.prop directly or style.setProperty( prop, value ) after a declaration is made important is forbidden (step 3): http://dev.w3.org/csswg/cssom/#append-a-css-declaration

If you'd like to set the propertyValue and reset the propertyPriority, you unfortunately have to use setPropertyPriority to "" first.

Let's see if I can get this changed by the WG.

@mgol
Member
mgol commented Sep 8, 2014

If you'd like to set the propertyValue and reset the propertyPriority, you unfortunately have to use setPropertyPriority to "" first.

So, basically, we'd have to use getPropertyPriority on each .css setter to know if we have to reset the !important flag or not. This might affect performance and is not the most pleasant interface to work with, it'd be great if Firefox behavior became standardized.

@mikesherov
Member

So, basically, we'd have to use getPropertyPriority on each .css setter to know if we have to reset the !important flag or not.

Depends. We could also just use setPropertyValue, which will change the value but retain the priority flag.

This might affect performance and is not the most pleasant interface to work with, it'd be great if Firefox behavior became standardized.

Working on it: http://lists.w3.org/Archives/Public/www-style/2014Sep/0117.html

@mescoda mescoda pushed a commit to mescoda/jquery that referenced this pull request Nov 4, 2014
@mgol mgol Css: Revert 24e5879
The workaround to be able to change !important styles broke the browser
keeping the old CSS value if the new one was rejected. Patching it would
involve a significant perf hit (~33%) so the initial patch needs to be
reverted instead.

Tests by m_gol & gibson042.

(cherry-picked from 10e6542)

Fixes #14836
Closes gh-1532
cf43cbd
@mgol mgol added a commit that referenced this pull request Sep 12, 2016
@mgol mgol Tests: Disable a whitespace-setting test in Edge 14
Working around this problem would require us to skip setting whitespace-only
values except when they're valid which would be very fragile. Another option
would be to set the value and see if it succeeded and then react to that.

We've tried something like that in the past to be able to overwrite !important
styles (see 24e5879) but it broke the CSS cascade (see
https://bugs.jquery.com/ticket/14836#comment:5) and was triggering
MutationObserver callbacks too often so it was reverted in PR gh-1532.

Ref gh-3204
Ref gh-1532
3f5f543
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment