Hybrid View

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha Premium Member
    Join Date
    Oct 2007
    Location
    Sarasota, FL
    Posts
    107
    Vote Rating
    3
    pbienick is on a distinguished road

      0  

    Default IE9 ignores simple SASS variable values

    IE9 ignores simple SASS variable values


    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

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,000
    Vote Rating
    649
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha Premium Member
    Join Date
    Oct 2007
    Location
    Sarasota, FL
    Posts
    107
    Vote Rating
    3
    pbienick is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha Premium Member
    Join Date
    Oct 2007
    Location
    Sarasota, FL
    Posts
    107
    Vote Rating
    3
    pbienick is on a distinguished road

      0  

    Default SDK help text needs updating as well

    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.
    That should be updated to "IE 6-9".

Thread Participants: 1

Tags for this Thread