total style calculation on scrollbar click, on :active?

Not reproducible Issue #11039835

Details

Author
Sebastian G.
Created
Feb 23, 2017
Privacy
This issue is public.
Found in
  • Internet Explorer
Found in build #
11
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Sorry for the german screenshots of IE etc.

The Problem:

I have this huge table, about 1500 lines with a noticeable amount of elements inside.
So one cause of the problem is the amount of elements, probably exceeding
1500 lines * 7 cells * 2 HTML elements.
This is a fact i am not allowed to change ;)
Clicking on the scrollbar button triggers a style calculation of all elements inside
the scrollable element. Due to the amount of the elements this style calculation
takes about 300ms, therefore noticeable.

The code:

<style type="text/css">
    .fooooooo:active {
        /* just remove this EMPTY rule to "fix" IE? */
    }

    * {
        padding: 0;
        margin: 0;
    }
    html, body {
        min-height: 100%;
        height: 100%;
    }

    .screen-container {
        height: 100%;
        overflow: scroll;
    }
</style>

<section class="screen-container">
    <table><!-- huge --></table>
</section>

How to reproduce:

Open IE "devtools", start a profiling session and just click on the scrollbar button of the <section> element.
Stop the profiling session and glance at the green bars - about 300ms style calculations. One for the click (":focus",":active"?)
on the button, one for the :blur on the button?
@see screenshot and or try the fiddle. jsfiddle

screenshot of jsfiddle with IE devtools

More information i found out so far:

1# The very existence of the CSS rule “.fooooooo:active” is enough. Notice that this rule has
no rules nor does it match any element.
Just removing it “prevents” the 300ms style calculation.

2# Moving the scrollbar away from the <section> to the <body> element also “fixes”
the style calculation problem. Probably because “body:active” "is not allowed"?. At least i cant
get it to work ;)

I don’t understand why this recalculation is necessary?

Attachments

1 attachment

Comments and activity

  • Microsoft Edge Team

    Changed Status to “Not reproducible”

  • Hello,
    Thank
    you for the feedback. This issue appears to have been fixed in Microsoft Edge.
    We’re not presently working on feature bugs in Internet Explorer outside of
    security-related issues. If you have a premier support contract you can visit https://premier.microsoft.com and open
    a support incident and work with an engineer to address this issue.

    Best
    Regards,

    The
    Microsoft Edge Team

You need to sign in to your Microsoft account to add a comment.

Sign in