1. #11
    Ext JS Premium Member stever's Avatar
    Join Date
    Mar 2007
    Posts
    1,407
    Vote Rating
    6
    stever will become famous soon enough stever will become famous soon enough

      0  

    Default


    Quote Originally Posted by wayne.rudd View Post
    After a bit more investigation it seems there is an issue is in IE9 with curved bordered divs that contain a large number of children (which in a Sencha app there are a lot of children when when have a complex grid loaded...)
    Interesting... sounds like GPU memory exhaustion (like it has too much / too many to composite). It would be interesting to know how the internals of IE9 work, but no one can see the code, so oh well.

    A generic html page that showed the problem would be great, I think I could find some people interested in finding solutions other than removing the rounded corners. The rounded corners likely just breaking the camel's back... but not the full problem.

    -s

  2. #12
    Sencha User
    Join Date
    Feb 2011
    Location
    Moscow, Russia
    Posts
    18
    Vote Rating
    0
    qi_tronic is on a distinguished road

      0  

    Default


    I found this border radius effect showing up mostly when the browser is in software rendering mode.
    It's just happened that the computer at my workplace is quite old and does not support IE9's GPU rendering.

    In GPU mode slowdown is very slight and is noticed only when you look at the right place at the rigth time and see that the button you are pressing is not showing 'pressing' animation immediately but after some 'thinking' delay.

    Also it can be analyzed using an utility that shows processor usage.
    IE9 consumes a noticeable amount of processor power when you press a button.
    In IE8 mode I cannot see any peaks in processor usage.

    I don't know how to make a generic page show the same effect.
    Ext UI causes a browser to perform redraws (or "reflows" ?) but static pages don't do that.

  3. #13
    Ext JS Premium Member stever's Avatar
    Join Date
    Mar 2007
    Posts
    1,407
    Vote Rating
    6
    stever will become famous soon enough stever will become famous soon enough

      0  

    Default


    Quote Originally Posted by qi_tronic View Post
    I found this border radius effect showing up mostly when the browser is in software rendering mode.
    It's just happened that the computer at my workplace is quite old and does not support IE9's GPU rendering.

    In GPU mode slowdown is very slight and is noticed only when you look at the right place at the rigth time and see that the button you are pressing is not showing 'pressing' animation immediately but after some 'thinking' delay.

    Also it can be analyzed using an utility that shows processor usage.
    IE9 consumes a noticeable amount of processor power when you press a button.
    In IE8 mode I cannot see any peaks in processor usage.

    I don't know how to make a generic page show the same effect.
    Ext UI causes a browser to perform redraws (or "reflows" ?) but static pages don't do that.
    What happens on IE8 if you do this in Ext.onReady (make sure it is at the top, right after the ext code include and before any of your code):

    Code:
        var body = Ext.getBody();
        if (Ext.isIE8) {
            Ext.supports.CSS3BorderRadius = true;
            body.removeCls('x-nbr');
            body.addCls('x-ie9'); 
            body.addCls('x-ie9p');
            body.removeCls('x-ie8');    
            body.removeCls('x-ie8m');
            body.removeCls('x-ie78');
            Ext.isIE8 = false;
            Ext.isIE9 = true;
         }
    Basically, try and fool ExtJS into thinking you have IE9 so you get the same DOM structure. If it is slow in that case, then it is the DOM structure that is at issue. Also, what happens when you do this one:

    Code:
        var body = Ext.getBody();
        if (Ext.isIE9) {
            // panel and toolbar ok (except in if in 'footer ui' mode)
            Ext.supports.CSS3BorderRadius = false;
            body.addCls('x-nbr');
            body.removeCls('x-ie9'); 
            body.removeCls('x-ie9p');
            body.addCls('x-ie8');    
            body.addCls('x-ie8m');
            body.addCls('x-ie78');
            Ext.isIE8 = true;
            Ext.isIE9 = false;
       }
    Not looking for correct rendering here, just speed issues.

  4. #14
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,108
    Vote Rating
    31
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    I did try Wayne's solution in combination with the suggestion of Animal

    The solution Animal give removes borders on tabs, its not a pretty sight..

    Code:
    Ext.supports.CSS3BorderRadius = false;
            Ext.getBody().addCls('x-nbr x-nlg'); <--removes borders on tabbuttons
    Besides that I buffered all the grids... now the performance is quite ok.

    But I hope this BorderRadius thing will be looked at for a further release. Can the Sencha team put this issue in the bugtrackingsystem?

  5. #15
    Sencha User
    Join Date
    Feb 2011
    Location
    Moscow, Russia
    Posts
    18
    Vote Rating
    0
    qi_tronic is on a distinguished road

      0  

    Default


    Stever,

    The second example is my original code and it was not intended to just change the DOM structure (though DOM structure also changes).

    Normally, ExtJS4+ looks if a browser supports some advanced CSS3 features like border-radius.
    It really does the tests every time it loads, not just relying on the browser version.
    If the browser does support border-radius Ext sets Ext.supports.CSS3BorderRadius = true.
    If it does not support that Ext sets Ext.supports.CSS3BorderRadius = false and also adds x-nbr class to the BODY element.

    So originally I set radius support to false and also added x-nbr.
    This caused Ext to not use simple frame rendering using rectangles with curved corners as it would do for modern browsers.
    Instead it started to apply previous generation solutions - a lot of DIVs around a border with special backgrounds or a TABLE for the same purpose.
    They use DIVs for big things like panels and TABLEs for buttons.

    This has been found to be faster for IE9 despite it's more complex DOM-wise.
    It renders panels and toolbars perfectly.

    BUT there are problems with some special elements when you add x-nbr and set radius support to false.
    There is some logic inside Ext that depends on other things:

    Panel headers - are rendered correctly only if x-ie9 class is removed.
    Tooltips for toolbar buttons - are rendered correctly only if x-ie8 is added.

    Checkboxes and tooltips - are rendered correctly only if you override an Ext CSS line which sets font size = 0 for a combination of x-ie and x-nbr classes.
    It should have been x-ie8m class there instead of x-ie but now we have what we have.

    Tabs - are rendered without frames. No solution yet.
    Button on the footer (toolbar with 'footer' UI) - is rendered without frames. No soltion also.

    Maybe I will found some solution tomorrow. Today is a holiday in Russia ... Labour day.
    The problem is related somehow to obtaining frameInfo object for those elements in Renderable.js...

    ---

    If I fool Ext that IE8 is IE9 (the first code example) then most probably we will get elements without rounded corners as special divs or tabs would not be applied and border-radius would not be understood by the browser.

  6. #16
    Ext JS Premium Member stever's Avatar
    Join Date
    Mar 2007
    Posts
    1,407
    Vote Rating
    6
    stever will become famous soon enough stever will become famous soon enough

      0  

    Default


    Quote Originally Posted by qi_tronic View Post
    Stever,

    The second example is my original code and it was not intended to just change the DOM structure (though DOM structure also changes).

    Normally, ExtJS4+ looks if a browser supports some advanced CSS3 features like border-radius.
    It really does the tests every time it loads, not just relying on the browser version.
    If the browser does support border-radius Ext sets Ext.supports.CSS3BorderRadius = true.
    If it does not support that Ext sets Ext.supports.CSS3BorderRadius = false and also adds x-nbr class to the BODY element.

    So originally I set radius support to false and also added x-nbr.
    This caused Ext to not use simple frame rendering using rectangles with curved corners as it would do for modern browsers.
    Instead it started to apply previous generation solutions - a lot of DIVs around a border with special backgrounds or a TABLE for the same purpose.
    They use DIVs for big things like panels and TABLEs for buttons.

    This has been found to be faster for IE9 despite it's more complex DOM-wise.
    It renders panels and toolbars perfectly.

    BUT there are problems with some special elements when you add x-nbr and set radius support to false.
    My request for that change was not to provide a solution, but rather see the effect of the changed DOM structure.

    Quote Originally Posted by qi_tronic View Post
    This has been found to be faster for IE9 despite it's more complex DOM-wise
    This shows that there is a correlation. However we still have not proven that the border-radius is the actual cause. There are so many other changes going on in the DOM and CSS, any one of which might be the cause (including, of course, border-radius itself -- but it could also be a combo of things like border-radius combined with some other CSS declaration). For example, I'm curious what the speed issue would be if you used the IE8 DOM/CSS but forced the border-radius back on in your own CSS override. (Obviously, this would not be pretty, but is only a test).

    BTW- if we were to have a nice small repeatable test, I'm sure we could get it fixed in IE.

  7. #17
    Sencha User
    Join Date
    Feb 2011
    Location
    Moscow, Russia
    Posts
    18
    Vote Rating
    0
    qi_tronic is on a distinguished road

      0  

    Default


    Stever,

    A nice small example is right in the Ext examples.
    Instructions:
    1. Switch IE9 to software rendering mode.
    2. Go to the example called 'layout browser': http://dev.sencha.com/deploy/ext-4.1...t-browser.html
    3. Notice that most layouts are fast.
    4. Go to Combination Examples -> Absolute Layout Form
    5. Press the buttons and see how they react. It's very repeatable

    Of course it is not _only_ border-radius.
    I think, based on what I saw, that it is border-radius in a panel frame plus the size of that frame plus some complex layout inside that frame.
    Unfortunately this describes any non-trivial panel with a frame

    I'm going to post the solution code right below this message.

  8. #18
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,108
    Vote Rating
    31
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    Well we need a sample without this one

    1. Switch IE9 to software rendering mode.


    Its also slower with default rendering, see the screen movies I posted. Maybe just take some grids on tabpanels and load the grids with some amount of data.

  9. #19
    Sencha User
    Join Date
    Feb 2011
    Location
    Moscow, Russia
    Posts
    18
    Vote Rating
    0
    qi_tronic is on a distinguished road

      0  

    Default


    Ok. A tricky one this was.

    I have found why panel headers, tabs and some buttons were not rendered with frames when I turned off CSS3BorderRadius.
    This is caused by another (mis)feature in IE9.

    When Ext uses old-style frames it encodes the way frames should be rendered in specially constructed background-position values in CSS.
    The values are like: {background-position: 1100303px 1000303px;}
    What IE9 does... it keeps these values in the final used style for the element only if NO background-image was set for this element. Even explicitly setting background-image: none breaks it.

    How did this work in IE8 and older?

    Well, IE8 and older used they own non-standard way of finding a computed style for an element.
    It is element.currentStyle property.
    IE9 has implemented window.getComputedStyle() and Ext checks for that and uses that.

    The funny thing I found is that element.currentStyle and window.getComputedStyle() have different semantics!
    currentStyle is 'computed style' before rendering.
    getComputedStyle() is 'used style' after rendering.
    This subtle difference between computed style and used style is defined in CSS2.1.

    So, currentStyle property actually keeps these weird background-position values but getComputedStyle() resets them probably after sanity checks during rendering.

    Here are two pieces of code:
    http://www.orfo.ru/ext-fixes/ie9-frames-fix.css

    Code:
    /*
     Ext 4.1 sets font-size = 0 for .x-nbr.x-ie combination.
     It is OK for older IEs but not for IE9.
     .x-nbr (no-border-radius) was not intended for IE9.
    */
    .x-nbr.x-ie9 .x-form-checkbox,
    .x-nbr.x-ie9 .x-form-radio {
      font-size: 12px;
    }
    
    /*
     This was set only for .x-ie8.
     IE9 also requires it when a frame is rendered using a table around a component.
    */
    .x-ie9 td.x-frame-mc {
      vertical-align: top;
    }
    and http://www.orfo.ru/ext-fixes/ie9-frames-fix.js

    Code:
    Ext.ux.IE9FramesFix = function() {
        if (Ext.isIE9) {
            //
            // Modified version of getFrameInfo() from util/Renderable.js
            // Uses IEx traditional element.currentStyle instead of window.getComputedStyle(element)
            // 
            Ext.AbstractComponent.prototype.getFrameInfo =  function() {
                // If native framing can be used, or this component is not going to be framed, then do not attempt to read CSS framing info.
                if (Ext.supports.CSS3BorderRadius || !this.frame) {
                    return false;
                }
        
                var me = this,
                    frameInfoCache = me.frameInfoCache,
                    el = me.el || me.protoEl,
                    cls = el.dom ? el.dom.className : el.classList.join(' '),
                    frameInfo = frameInfoCache[cls],
                    styleEl, left, top, info;
        
                if (frameInfo == null) {
                    // Get the singleton frame style proxy with our el class name stamped into it.
                    styleEl = Ext.fly(me.getStyleProxy(cls), 'frame-style-el');
                    left = styleEl.dom.currentStyle['backgroundPositionX'];
                    top = styleEl.dom.currentStyle['backgroundPositionY'];
        
                    // Some browsers don't support background-position-x and y, so for those
                    // browsers let's split background-position into two parts.
                    if (!left && !top) {
                        info = styleEl.dom.currentStyle['backgroundPosition'].split(' ');
                        left = info[0];
                        top = info[1];
                    }
        
                    frameInfo = me.calculateFrame(left, top);
        
                    if (frameInfo) {
                        // Just to be sure we set the background image of the el to none.
                        el.setStyle('background-image', 'none');
                    }
        
                    //<debug error>
                    // This happens when you set frame: true explicitly without using the x-frame mixin in sass.
                    // This way IE can't figure out what sizes to use and thus framing can't work.
                    if (me.frame === true && !frameInfo) {
                        Ext.log.error('You have set frame: true explicity on this component (' + me.getXType() + ') and it ' +
                                'does not have any framing defined in the CSS template. In this case IE cannot figure out ' +
                                'what sizes to use and thus framing on this component will be disabled.');
                    }
                    //</debug>
        
                    frameInfoCache[cls] = frameInfo;
                }
        
                me.frame = !!frameInfo;
                me.frameSize = frameInfo;
        
                return frameInfo;
            };
            
            // Turn on the old IE6-IE8 way of rounded corners rendering
            Ext.supports.CSS3BorderRadius = false;
            Ext.getBody().addCls('x-nbr');
        }    
    }
    Include them and call Ext.ux.IE9FramesFix() from your onReady() function.

    This fixes all frames-related issues in my case. Maybe there are others.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar