23 Apr 2012 1:01 PM #1
IE9 ignores simple SASS variable values
Ext version tested:
- Ext 4.1 rev RC3
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)
- OS X 10.7.3
- Windows 7
23 Apr 2012 10:38 PM #2
- Join Date
- Apr 2007
- Sydney, Australia
- Vote Rating
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......Evan Trimboli
Twitter - @evantrimboli
Don't be afraid of the source code!
24 Apr 2012 4:23 AM #3
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.
24 Apr 2012 12:09 PM #4
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:
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.