New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

css vendor prefix error #2015

Closed
pltnkv opened this Issue Jan 16, 2015 · 3 comments

Comments

Projects
None yet
4 participants
@pltnkv

pltnkv commented Jan 16, 2015

$().css automaticly add vendor prefixes, but if firstly call "$().css" function with prefixes styles, auto-adding break. Run example in Safari
http://jsfiddle.net/8cf0hyhj/

@dmethvin

This comment has been minimized.

Show comment
Hide comment
@dmethvin

dmethvin Jan 21, 2015

Member

Yes, trying this on Safari 8 via Browserstack I agree it's failing. The problem seems to be that if you explicitly set the vendor-prefixed property on a style then Safari starts responding to that property on any CSSStyleDeclaration. Totally bizarre. Can someone else verify they see this happening in vendorPropName() as well?

I don't know that this is something we can fix. Is there a reason you just don't let us do the prefixes for you?

Member

dmethvin commented Jan 21, 2015

Yes, trying this on Safari 8 via Browserstack I agree it's failing. The problem seems to be that if you explicitly set the vendor-prefixed property on a style then Safari starts responding to that property on any CSSStyleDeclaration. Totally bizarre. Can someone else verify they see this happening in vendorPropName() as well?

I don't know that this is something we can fix. Is there a reason you just don't let us do the prefixes for you?

@mgol

This comment has been minimized.

Show comment
Hide comment
@mgol

mgol Jan 21, 2015

Member

This bug is caused by:

( jQuery.cssProps[ origName ] = vendorPropName( style, origName ) );

If we find neither the original style property nor a prefixed one, we return the original one from vendorPropName(). This is then saved to jQuery.cssProps[propertyName] in the line linked above. The first .css setter checks for msTransform first and since Safari recognizes neither msTransform, msMsTransform, webkitMsTransform nor mozMsTransform, jQuery.cssProps.transform is saved to be "msTransform".

Later when we try to set transform to something, we have it cached that it maps to msTransform which obviously won't work.

We should fix it.

Member

mgol commented Jan 21, 2015

This bug is caused by:

( jQuery.cssProps[ origName ] = vendorPropName( style, origName ) );

If we find neither the original style property nor a prefixed one, we return the original one from vendorPropName(). This is then saved to jQuery.cssProps[propertyName] in the line linked above. The first .css setter checks for msTransform first and since Safari recognizes neither msTransform, msMsTransform, webkitMsTransform nor mozMsTransform, jQuery.cssProps.transform is saved to be "msTransform".

Later when we try to set transform to something, we have it cached that it maps to msTransform which obviously won't work.

We should fix it.

@mgol mgol added this to the 3.0.0 milestone Jan 21, 2015

@mgol mgol added Bug CSS labels Jan 21, 2015

@mgol mgol self-assigned this Apr 26, 2015

mgol added a commit to mgol/jquery that referenced this issue May 11, 2015

CSS: Don't cache unrecognized CSS property names
This prevents jQuery from caching a prefixed property name if provided
directly by the user, e.g. the following code:

	elem.css( "mozTransition", "all 1s" );

should not prevent one from from later setting the transition directly:

	elem.css( "transition", "all 1s" );

on a browser not understanding the unprefixed version which is the case
for Safari 8 & transition.

Fixes gh-2015

mgol added a commit to mgol/jquery that referenced this issue May 11, 2015

CSS: Don't cache unrecognized CSS property names
This prevents jQuery from caching a prefixed property name if provided
directly by the user, e.g. the following code:

	elem.css( "msTransform", "translate(5px, 2px)" );

should not prevent one from from later setting the transition directly:

	elem.css( "transform", "translate(5px, 2px)" );

on a browser not understanding the unprefixed version which is the case
for Safari 8 & transform.

Fixes gh-2015

mgol added a commit to mgol/jquery that referenced this issue May 11, 2015

CSS: Don't cache unrecognized CSS property names
This prevents jQuery from caching a prefixed property name if provided
directly by the user, e.g. the following code:

	elem.css( "msTransform", "translate(5px, 2px)" );

should not prevent one from from later setting the transition directly:

	elem.css( "transform", "translate(5px, 2px)" );

on a browser not understanding the unprefixed version which is the case
for Safari 8 & transform.

Fixes gh-2015
@mgol

This comment has been minimized.

Show comment
Hide comment
@mgol

mgol May 11, 2015

Member

PR: #2298

Member

mgol commented May 11, 2015

PR: #2298

mgol added a commit to mgol/jquery that referenced this issue May 12, 2015

CSS: Don't cache unrecognized CSS property names
This prevents jQuery from caching a prefixed property name if provided
directly by the user, e.g. the following code:

	elem.css( "msTransform", "translate(5px, 2px)" );

should not prevent one from from later setting the transition directly:

	elem.css( "transform", "translate(5px, 2px)" );

on a browser not understanding the unprefixed version which is the case
for Safari 8 & transform.

Fixes gh-2015

mgol added a commit to mgol/jquery that referenced this issue May 12, 2015

CSS: Don't cache unrecognized CSS property names
This prevents jQuery from caching a prefixed property name if provided
directly by the user, e.g. the following code:

	elem.css( "msTransform", "translate(5px, 2px)" );

should not prevent one from from later setting the transition directly:

	elem.css( "transform", "translate(5px, 2px)" );

on a browser not understanding the unprefixed version which is the case
for Safari 8 & transform.

Fixes gh-2015

mgol added a commit to mgol/jquery that referenced this issue May 19, 2015

CSS: Don't cache unrecognized CSS property names
This prevents jQuery from caching a prefixed property name if provided
directly by the user, e.g. the following code:

	elem.css( "msTransform", "translate(5px, 2px)" );

should not prevent one from from later setting the transition directly:

	elem.css( "transform", "translate(5px, 2px)" );

on a browser not understanding the unprefixed version which is the case
for Safari 8 & transform.

Fixes gh-2015

@mgol mgol closed this in d471842 Jun 1, 2015

mgol added a commit that referenced this issue Jun 1, 2015

CSS: Don't cache unrecognized CSS property names
This prevents jQuery from caching a prefixed property name if provided
directly by the user, e.g. the following code:

	elem.css( "msTransform", "translate(5px, 2px)" );

should not prevent one from from later setting the transition directly:

	elem.css( "transform", "translate(5px, 2px)" );

on a browser not understanding the unprefixed version which is the case
for Safari 8 & transform.

(cherry-picked from d471842)

Fixes gh-2015
Closes gh-2298

mgol added a commit that referenced this issue Nov 10, 2015

CSS: Don't cache unrecognized CSS property names
This prevents jQuery from caching a prefixed property name if provided
directly by the user, e.g. the following code:

	elem.css( "msTransform", "translate(5px, 2px)" );

should not prevent one from from later setting the transition directly:

	elem.css( "transform", "translate(5px, 2px)" );

on a browser not understanding the unprefixed version which is the case
for Safari 8 & transform.

Fixes gh-2015
Closes gh-2298

@dmethvin dmethvin modified the milestones: 1.12/2.2, 3.0.0 Jan 7, 2016

@cssmagic cssmagic referenced this issue May 18, 2016

Open

jQuery #5

@lock lock bot locked as resolved and limited conversation to collaborators Jun 19, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.