Bug Tracker

Ticket #9572 (closed bug: fixed)

Opened 3 years ago

Last modified 3 years ago

jQuery 1.6.1 doesn't support -ms-transform in .css() method

Reported by: Wei Lou Owned by: dmethvin
Priority: low Milestone: 1.6.3
Component: css Version: 1.6.1
Keywords: Cc:
Blocking: Blocked by:

Description

Reproducing the bug by running codes below on IE9:

<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML5 Document</title>
<style>
	p {
		width:400px;
		height:400px;
		background:red;
		-ms-transform:scale(.3);
	}
</style>
<p>This is a jQuery 1.6.1 bug.
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script>
	// Fail to work
	$('p').css('-ms-transform', 'scale(1)');
	// Work OK
	// $('p').css('msTransform', 'scale(1)');
</script>

jQuery 1.6.1 doesn't support -ms-transform in .css() method. But jQuery should support.

Change History

comment:1 Changed 3 years ago by timmywil

  • Priority changed from undecided to low
  • Status changed from new to open
  • Component changed from unfiled to css

Neither works for me. This might be worth looking into, just so cssHooks and manual settings can do this without interference:  http://jsfiddle.net/timmywil/gRvkL/1/

comment:2 Changed 3 years ago by dmethvin

This is because Microsoft screwed up their interpretation of vendor prefixes. -ms-transform should map to MsTransform but instead it maps to msTransform. So to work around it we need to add .replace(/^-ms-/, "ms-") to prevent the initial caps. Of course that potentially screws up the use of .camelCase in non-css contexts...(shakes fist)

comment:3 Changed 3 years ago by Wei Lou

I find a new similar bug in jQuery 1.6.1. That is $('p').css('mozTransform', 'scale(1)'); does work on Firefox 4.0.1. And $('p').css('-moz-transform', 'scale(1)'); works well. See codes:  http://jsfiddle.net/dbsud

comment:4 Changed 3 years ago by timmywil

  • Milestone changed from 1.next to 1.7

Confirmed in bug triage. I think we can get this into 1.7.

comment:5 Changed 3 years ago by john

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

comment:6 Changed 3 years ago by dmethvin

  • Milestone changed from 1.7 to 1.6.3

$('p').css('mozTransform', 'scale(1)'); does work on Firefox 4.0.1

That's because it should be:

   $('p').css('MozTransform', 'scale(1)')

The leading dash on the vendor prefix means that the first letter *should* be capitalized. The bug is that Microsoft's -ms- prefix does not map to Ms but instead to ms.

comment:7 Changed 3 years ago by timmywil

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

Landing pull request 463. Fixes #9572. Don't camelize the -ms- prefix because Microsoft didn't. A Fixes #9572.

More Details:

comment:8 Changed 3 years ago by dmethvin

Landing pull request 463. Fixes #9572. Don't camelize the -ms- prefix because Microsoft didn't. A Fixes #9572.

More Details:

Note: See TracTickets for help on using tickets.