Results 1 to 10 of 10

Thread: Bug IE10 Linear Gradients

    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
    9
    Vote Rating
    0
      0  

    Default 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
    6,154
    Vote Rating
    249
      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
      0  

    Default 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
      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
    9
    Vote Rating
    0
      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
    9
    Vote Rating
    0
      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
    9
    Vote Rating
    0
      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
    9
    Vote Rating
    0
      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
    1
      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
    1
      1  

    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;
            }
        }
    }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •