IE9 ignores simple SASS variable values
Ext version tested:
Browser versions tested against:
- FF11 (OS X, Windows)
- Safari 5.1.5
- Chrome 18.0 (OS X, Windows)
DOCTYPE tested against:
- 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
See live test below
See this URL for live test case. Note that the panel header should be red, and the button should be blue:
You can download a zip file of the code from http://bienick.com/bugsassie9/
Debugging already done:
- Make it a federal crime to use any version of Internet Explorer?
Additional CSS used:
- custom css (as generated by the Compass compiler)
SDK help text needs updating as well
Just wanted to add that the SDK help text needs to be updated as well. If you type sencha slice theme -?, you'll see:
That should be updated to "IE 6-9".
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.