IE9 ignores simple SASS variable values

[pbienick]

REQUIRED INFORMATION


Ext version tested:

• Ext 4.1 rev RC3

Browser versions tested against:

• IE9
• FF11 (OS X, Windows)
• Safari 5.1.5
• Chrome 18.0 (OS X, Windows)

DOCTYPE tested against:

• html

Description:

• Following the directions in the Theming Guide to setup a simple project, IE9 ignores $base-color, $button-default-base-color, and probably others. I realize this might be an IE bug but still thought it was worth posting here.

Steps to reproduce the problem:

• Create a new Ext JS project, add a simple panel & button
• Follow the instructions in the Theming Guide to switch over to using SASS/Compass
• Change $base-color & $button-default-base-color in your SCSS file

The result that was expected:

• For the colors to be correct in all modern browsers

The result that occurs instead:

• All browsers except IE9 display the correct color

Test Case:

See live test below

HELPFUL INFORMATION


See this URL for live test case. Note that the panel header should be red, and the button should be blue:

http://bienick.com/bugsassie9/example/

You can download a zip file of the code from http://bienick.com/bugsassie9/

Debugging already done:

• none

Possible fix:

• Make it a federal crime to use any version of Internet Explorer?

Additional CSS used:

• custom css (as generated by the Compass compiler)

Operating System:

• OS X 10.7.3
• Windows 7

[evant]

For IE you also need to run the slicer tool to have the theme behave.

IE9 and less do not support linear-gradient, so that background on the panel needs to be an image. Similarly, only IE9 in strict mode supports border-radius, which means more images for the IE9 quirks and IE<=8.

Check out this part toward the end:

Supporting Legacy Browsers

In most cases when creating new UI's, you will want to include background gradients or rounded corners. Unfortunately legacy browsers do not support the corresponding CSS3 properties, so we must use images instead......

Thanks for taking the time to put together an example.

[pbienick]

Thanks for your reply, Evan. I definitely saw that section towards the end of the Theming Guide, but I didn't think IE9 was considered to be a legacy browser since it's the most current version. May I politely suggest that you have someone update that page to be more specific about what constitutes a legacy browser?

Rhetorical side note: I often wonder how far along web development would be if we could recoup the hours lost to supporting any version of IE.

[pbienick]

Just wanted to add that the SDK help text needs to be updated as well. If you type sencha slice theme -?, you'll see:

The Sencha Theme Slicer allows you to take your custom theme and slice up images for browsers that do not support border radii or linear gradients. This is the case for IE 6-8.

That should be updated to "IE 6-9".