You found a bug! We've classified it as EXTJS-10058 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2012
    Posts
    8
    Vote Rating
    0
    kaya_basharan is on a distinguished road

      0  

    Default Bug IE10 Linear Gradients

    Bug IE10 Linear Gradients


    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.2.1-beta
    • Ext 4.2.1
    • Ext 4.2.2

    Browser versions tested against:
    • IE10
    • IE11

    Description:
    • Internet Explorer 10 is incorrectly identified as not supporting CSS linear-gradients. It does. But of course it doesn't support the incorrect syntax found in ExtJS's CSS.



    HELPFUL INFORMATION


    Possible fix:


    Solution step 1:
    • Remove the class x-nlg from the body tag for IE10

    Solution step 2:
    • Use the correct syntax:
    • -ms-linear-gradient(top, white, black);
    • linear-gradient(to bottom, white, black);

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,021
    Vote Rating
    183
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha User
    Join Date
    Dec 2010
    Posts
    1
    Vote Rating
    0
    Silas is on a distinguished road

      0  

    Default When can we expect a fix?

    When can we expect a fix?


    This problem can't seriously be too hard to fix. When can we expect an update with this corrected?

  4. #4
    Sencha User
    Join Date
    Jul 2008
    Posts
    1
    Vote Rating
    0
    iCharlie is on a distinguished road

      0  

    Default


    In my mind the object "supportsVectors" in the closure where the Ext.supports object is located.


    The arrays "IE10-quirks" and "IE10-strict" in this object are checked in Ext.supports.init() and simply contain a zero instead of a one on the index for the "CSS3LinearGradient" test.


    Unfortunately i have not managed to override this object or the call to the function. I simply set the property "Ext.supports.CSS3LinearGradient" to true for IE10 and made some changes in my overriding stylesheets (-ms-linear-gradient(...))


    PHP Code:
    if (Ext.isIE && Ext.isIE10) {    Ext.supports.CSS3LinearGradient true;} 

  5. #5
    Ext JS Premium Member
    Join Date
    Feb 2012
    Posts
    8
    Vote Rating
    0
    kaya_basharan is on a distinguished road

      0  

    Default


    The problem is IE10 doesn't support the syntax used in ExtJS.&nbsp; IE10 supports the new, changed-at-the-last-minute syntax.<br>Just view this page with IE10 to see it working:<br><a href="http://jsfiddle.net/kaya_basharan/QxdqU/" data-cke-saved-href="http://jsfiddle.net/kaya_basharan/QxdqU/">http://jsfiddle.net/kaya_basharan/QxdqU/</a>

  6. #6
    Ext JS Premium Member
    Join Date
    Feb 2012
    Posts
    8
    Vote Rating
    0
    kaya_basharan is on a distinguished road

      0  

    Default


    I find it quite significant that another version of IE has arrived (IE11) with yet more layout problems for ExtJS and you still haven't fixed even simple problems with the previous one (IE10). I just checked ExtJS 4.2.1 in IE11 and linear-gradients are still failing because you're using the wrong syntax.Correct syntax:linear-gradient(to bottom, #dae7f6, #abc7ec 50%, #b8cfee 51%, #cbddf3);

  7. #7
    Ext JS Premium Member
    Join Date
    Feb 2012
    Posts
    8
    Vote Rating
    0
    kaya_basharan is on a distinguished road

      0  

    Default


    Emphasis on "to bottom" - the 'Quick Reply' RTE tools aren't working in Chrome.

  8. #8
    Ext JS Premium Member
    Join Date
    Feb 2012
    Posts
    8
    Vote Rating
    0
    kaya_basharan is on a distinguished road

      0  

    Default


    Here's a simple test for linear-gradient support: http://jsfiddle.net/kaya_basharan/AFj4N/

  9. #9
    Sencha User
    Join Date
    Feb 2011
    Posts
    2
    Vote Rating
    0
    fedro321 is on a distinguished road

      0  

    Default


    I found that correcting the syntax in the css by simply replacing 'bottom' with 'to bottom' and so on does not fix the issue (although at least you will see gradients in IE). This has the effect of mozilla and webkit browsers using the now valid rule. Unfortunately the valid rule does not evaluate into the same style as the browser specific rules, so as well as replacing the incorrect syntax you have to redefine it. I would suggest that this bug is fairly important to fix, given the reason many of us use ExtJs is so our web applications work in all browsers.

  10. #10
    Sencha User
    Join Date
    Feb 2011
    Posts
    2
    Vote Rating
    0
    fedro321 is on a distinguished road

      0  

    Default


    We are using Sencha Cmd to generate our CSS. Digging a little deeper on this one, the issue for us was Compass as documented in this bug https://github.com/chriseppstein/compass/issues/965 To fix the issue I applied the suggested fix in the thread above to the background-gradient mixin ( background-gradient.scss ). Here's how the code looks now:

    Code:
    // Return the modulo of two numbers
    @function mod($dividend,$divisor) {
      @return $dividend - (floor($dividend/$divisor)*$divisor);
    }
    
    // Return the corrected angle or position for a css gradient
    @function angle($deg) {
      @if type-of($deg) == 'number' {
        @return mod(abs($deg - 450), 360deg);
      } @else {
        $position: to + " ";
        @each $pos in $deg {
          $position: $position + opposite-position($pos) + " ";
        }
        @return $position;
      }
    }
    
    /**
     * Creates a background gradient.
     *
     * Example usage:
     *     .foo {
     *          @include background-gradient(#808080, matte, left);
     *     }
     *
     * @param {Color} $bg-color The background color of the gradient
     * @param {String/List} [$type=$base-gradient] The type of gradient to be used. Can either
     * be a String which is a predefined gradient name, or it can can be a list of color stops.
     * If null is passed, this mixin will still set the `background-color` to $bg-color.
     * The available predefined gradient names are:
     *
     * * bevel
     * * glossy
     * * recessed
     * * matte
     * * matte-reverse
     * * panel-header
     * * tabbar
     * * tab
     * * tab-active
     * * tab-over
     * * tab-disabled
     * * grid-header
     * * grid-header-over
     * * grid-row-over
     * * grid-cell-special
     * * glossy-button
     * * glossy-button-over
     * * glossy-button-pressed
     *
     * Each of these gradient names corresponds to a function named linear-gradient[name].
     * Themes can override these functions to customize the color stops that they return.
     * For example, to override the glossy-button gradient function add a function named
     * "linear-gradient-glossy-button" to a file named "sass/etc/mixins/background-gradient.scss"
     * in your theme.  The function should return the result of calling the Compass linear-gradient
     * function with the desired direction and color-stop information for the gradient.  For example:
     *
     *     @function linear-gradient-glossy-button($direction, $bg-color) {
     *         @return linear-gradient($direction, color_stops(
     *             mix(#fff, $bg-color, 10%),
     *             $bg-color 50%,
     *             mix(#000, $bg-color, 5%) 51%,
     *             $bg-color
     *         ));
     *     }
     *
     * @param {String} [$direction=top] The direction of the gradient. Can either be
     * `top` or `left`.
     *
     * @member Global_CSS
     */
    @mixin background-gradient($bg-color, $type: $base-gradient, $direction: top) {
        background-image: none;
        background-color: $bg-color;
    
        @if $base-gradient != null and $bg-color != transparent {
            $gradient: null;
            $compliantGradient: null;
            $compliantDirection: angle($direction);
    
            //color_stops
            @if type-of($type) == "list" {
                $gradient: linear-gradient($direction, $type);
                $compliantGradient: linear-gradient($compliantDirection, $type);
            }
    
            //default gradients
            @else if $type == bevel {
                $gradient: linear-gradient-bevel($direction, $bg-color);
                $compliantGradient: linear-gradient-bevel($compliantDirection, $bg-color);
            } @else if $type == glossy {
                $gradient: linear-gradient-glossy($direction, $bg-color);
                $compliantGradient: linear-gradient-glossy($compliantDirection, $bg-color);
            } @else if $type == recessed {
                $gradient: linear-gradient-recessed($direction, $bg-color);
                $compliantGradient: linear-gradient-recessed($compliantDirection, $bg-color);
            } @else if $type == matte {
                $gradient: linear-gradient-matte($direction, $bg-color);
                $compliantGradient: linear-gradient-matte($compliantDirection, $bg-color);
            } @else if $type == matte-reverse {
                $gradient: linear-gradient-matte-reverse($direction, $bg-color);
                $compliantGradient: linear-gradient-matte-reverse($compliantDirection, $bg-color);
            }
    
            // gradients
            @else if $type == panel-header {
                $gradient: linear-gradient-panel-header($direction, $bg-color);
                $compliantGradient: linear-gradient-panel-header($compliantDirection, $bg-color);
            } @else if $type == tabbar {
                $gradient: linear-gradient-tabbar($direction, $bg-color);
                $compliantGradient: linear-gradient-tabbar($compliantDirection, $bg-color);
            } @else if $type == tab {
                $gradient: linear-gradient-tab($direction, $bg-color);
                $compliantGradient: linear-gradient-tab($compliantDirection, $bg-color);
            } @else if $type == tab-active {
                $gradient: linear-gradient-tab-active($direction, $bg-color);
                $compliantGradient: linear-gradient-tab-active($compliantDirection, $bg-color);
            } @else if $type == tab-over {
                $gradient: linear-gradient-tab-over($direction, $bg-color);
                $compliantGradient: linear-gradient-tab-over($compliantDirection, $bg-color);
            } @else if $type == tab-disabled {
                $gradient: linear-gradient-tab-disabled($direction, $bg-color);
                $compliantGradient: linear-gradient-tab-disabled($compliantDirection, $bg-color);
            } @else if $type == grid-header {
                $gradient: linear-gradient-grid-header($direction, $bg-color);
                $compliantGradient: linear-gradient-grid-header($compliantDirection, $bg-color);
            } @else if $type == grid-header-over {
                $gradient: linear-gradient-grid-header-over($direction, $bg-color);
                $compliantGradient: linear-gradient-grid-header-over($compliantDirection, $bg-color);
            } @else if $type == grid-row-over {
                $gradient: linear-gradient-grid-row-over($direction, $bg-color);
                $compliantGradient: linear-gradient-grid-row-over($compliantDirection, $bg-color);
            } @else if $type == grid-cell-special {
                $gradient: linear-gradient-grid-cell-special($direction, $bg-color);
                $compliantGradient: linear-gradient-grid-cell-special($compliantDirection, $bg-color);
            } @else if $type == glossy-button or $type == glossy-button-disabled {
                $gradient: linear-gradient-glossy-button($direction, $bg-color);
                $compliantGradient: linear-gradient-glossy-button($compliantDirection, $bg-color);
            } @else if $type == glossy-button-over {
                $gradient: linear-gradient-glossy-button-over($direction, $bg-color);
                $compliantGradient: linear-gradient-glossy-button-over($compliantDirection, $bg-color);
            } @else if $type == glossy-button-pressed {
                $gradient: linear-gradient-glossy-button-pressed($direction, $bg-color);
                $compliantGradient: linear-gradient-glossy-button-pressed($compliantDirection, $bg-color);
            }
    
            @if $gradient != null {
                @include background-image($gradient);
            }
            
            @if $compliantGradient != null {
                background-image: $compliantGradient;
            }
        }
    }