How do I prevent page flicker in IE which does not appear in Firefox?

问题

I have a page that relies on translation in 2d to move a table to the right of the screen if my scroll position before page resubmit is scrolled to the right.

The effect I am trying to capture is a table that is scrolled to the right when sorting the table (fixed header, limited height body, overflow scroll).

Firefox, even surprisingly Edge does not flicker, only IE flickers when I use this effect.

How do I suppress the artifacts of my CSS translation to eliminate this annoying IE page flicker?

This is related to a previous post I created with code provided.

Fixed Header Scrollable Table - How to preserve horizontal scroll position using css jquery on page loads

jQuery

   function setScroll(id_header, id_table)
    {
         $('div.'+id_table).on("scroll", function(){  //activate when #center scrolls
                var left = $('div.'+ id_table).scrollLeft();  //save #center position to var left
               $('div.'+id_header).scrollLeft(left);        //set #top to var left
               $('#scrollamount').val(left);
            });

        $('table#'+ id_table).attr("style", "transform:translateX(0px)");   
         $('table#'+ id_header).attr("style", "transform:translateX(0px)");   
        $('div.'+ id_table).scrollLeft($('#scrollamount').val());
        rows = $('#summary_table tr').length;
        if(rows > 1)
        {
            $('div.'+ id_table).attr("style", "overflow-x: scroll; overflow-y: scroll; max-height: 250px !important");
        } 
        else if(rows == 1)
        {
            $('div.overlay div.'+ id_header).attr("style", "overflow-x: hidden; overflow-y: none; width: 783px !important");
            $('div.overlay div.'+ id_table).attr("style", "overflow-x: scroll; overflow-y: none; width: 783px !important");
        } 
        $('div.'+ id_header).scrollLeft($('#scrollamount').val());
    }

HTML Table

 <div class="summary_header">
        <table border="1" id="summary_header" style=
        "transform:translateX(0px)">
            <thead class="header">
                <tr>
                    <th class="edit" style="min-width: 34px; max-width:34px">
                    Edit</th>
                    <th style="min-width:34px; max-width:34px">
                    <nobr><a onclick="$('#summaryform').attr('action', 'allactionitems.php?orderby=ActionItemID&dir=DESC&load=1');$('#summaryform').submit();">
                    ID</a> <span style=
                    'display: inline-block; width: 13'></span></nobr></th>
                    <th style="min-width:449.86px; max-width:449.86px">
                    <nobr><a onclick=
                    "$('#summaryform').attr('action', 'allactionitems.php?orderby=ActionItemTitle&dir=DESC&load=1');$('#summaryform').submit();">
                    ActionItemTitle</a> <span style=
                    'display: inline-block; width: 13'></span></nobr></th>
                    <th style="min-width:105.34px; max-width:105.34px">
                    <nobr><a onclick=
                    "$('#summaryform').attr('action', 'allactionitems.php?orderby=Criticality&dir=DESC&load=1');$('#summaryform').submit();">
                    Criticality</a> <span style=
                    'display: inline-block; width: 13'></span></nobr></th>
                    <th style="min-width:123.16px; max-width:123.16px">
                    <nobr><a onclick=
                    "$('#summaryform').attr('action', 'allactionitems.php?orderby=Assignor&dir=DESC&load=1');$('#summaryform').submit();">
                    Assignor</a> <span style=
                    'display: inline-block; width: 13'></span></nobr></th>
                    <th style="min-width:123.16px; max-width:123.16px">
                    <nobr><a onclick=
                    "$('#summaryform').attr('action', 'allactionitems.php?orderby=Owner&dir=DESC&load=1');$('#summaryform').submit();">
                    Owner</a> <span style=
                    'display: inline-block; width: 13'></span></nobr></th>
                    <th style="min-width:129.1px; max-width:129.1px">
                    <nobr><a onclick=
                    "$('#summaryform').attr('action', 'allactionitems.php?orderby=AltOwner&dir=DESC&load=1');$('#summaryform').submit();">
                    AltOwner</a> <span style=
                    'display: inline-block; width: 13'></span></nobr></th>
                    <th style="min-width:123.16px; max-width:123.16px">
                    <nobr><a onclick=
                    "$('#summaryform').attr('action', 'allactionitems.php?orderby=Approver&dir=DESC&load=1');$('#summaryform').submit();">
                    Approver</a> <span style=
                    'display: inline-block; width: 13'></span></nobr></th>
                    <th style="min-width:111.28px; max-width:111.28px">
                    <nobr><a onclick=
                    "$('#summaryform').attr('action', 'allactionitems.php?orderby=AssignedDate&dir=DESC&load=1');$('#summaryform').submit();">
                    AssignedDate</a> <span style=
                    'display: inline-block; width: 13'></span></nobr></th>
                    <th style="min-width:99.4px; max-width:99.4px">
                    <nobr><a onclick=
                    "$('#summaryform').attr('action', 'allactionitems.php?orderby=DueDate&dir=DESC&load=1');$('#summaryform').submit();">
                    DueDate</a> <span style=
                    'display: inline-block; width: 13'></span></nobr></th>
                    <th style="min-width:99.4px; max-width:99.4px">
                    <nobr><a onclick=
                    "$('#summaryform').attr('action', 'allactionitems.php?orderby=ECD&dir=DESC&load=1');$('#summaryform').submit();">
                    ECD</a> <span style=
                    'display: inline-block; width: 13'></span></nobr></th>
                    <th style="min-width:123.16px; max-width:123.16px">
                    <nobr><a onclick=
                    "$('#summaryform').attr('action', 'allactionitems.php?orderby=CompletionDate&dir=DESC&load=1');$('#summaryform').submit();">
                    CompletionDate</a> <span style=
                    'display: inline-block; width: 13'></span></nobr></th>
                    <th style="min-width:99.4px; max-width:99.4px">
                    <nobr><a onclick=
                    "$('#summaryform').attr('action', 'allactionitems.php?orderby=ClosedDate&dir=DESC&load=1');$('#summaryform').submit();">
                    ClosedDate</a> <span style=
                    'display: inline-block; width: 13'></span></nobr></th>
                    <th style="min-width:93.46px; max-width:93.46px">
                    <nobr><a onclick=
                    "$('#summaryform').attr('action', 'allactionitems.php?orderby=Category1&dir=DESC&load=1');$('#summaryform').submit();">
                    Category1</a> <span style=
                    'display: inline-block; width: 13'></span></nobr></th>
                    <th style="min-width:93.46px; max-width:93.46px">
                    <nobr><a onclick=
                    "$('#summaryform').attr('action', 'allactionitems.php?orderby=Category2&dir=DESC&load=1');$('#summaryform').submit();">
                    Category2</a> <span style=
                    'display: inline-block; width: 13'></span></nobr></th>
                    <th style="min-width:93.46px; max-width:93.46px">
                    <nobr><a onclick=
                    "$('#summaryform').attr('action', 'allactionitems.php?orderby=Category3&dir=DESC&load=1');$('#summaryform').submit();">
                    Category3</a> <span style=
                    'display: inline-block; width: 13'></span></nobr></th>
                    <th style="min-width:93.46px; max-width:93.46px">
                    <nobr><a onclick=
                    "$('#summaryform').attr('action', 'allactionitems.php?orderby=Category4&dir=DESC&load=1');$('#summaryform').submit();">
                    Category4</a> &#9650;</nobr></th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="summary_table overflow_table" style="overflow-x:hidden">
        <table border="1" id="summary_table" style="transform:translateX(0px)">
            <tbody>
                <tr class="row_even" id="row1">
                    <td class="edit" style="min-width: 34px; max-width:34px">
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
                    <!--input type="submit" value="Edit" style="width:60;height:20; border:none;font-weight: bold" /-->
                     </td>
                    <td style="min-width:34px; max-width:34px">
                    <nobr>&nbsp;</nobr></td>
                    <td style="min-width:449.86px; max-width:449.86px">
                    <nobr>&nbsp;</nobr></td>
                    <td style="min-width:105.34px; max-width:105.34px">
                    <nobr>&nbsp;</nobr></td>
                    <td style="min-width:123.16px; max-width:123.16px">
                    <nobr><span>&nbsp;</span></nobr></td>
                    <td style="min-width:123.16px; max-width:123.16px">
                    <nobr><span>&nbsp;</span></nobr></td>
                    <td style="min-width:129.1px; max-width:129.1px">
                    <nobr><span></span></nobr></td>
                    <td style="min-width:123.16px; max-width:123.16px">
                    <nobr><span>&nbsp;</span></nobr></td>
                    <td style="min-width:111.28px; max-width:111.28px">
                    <nobr><span class="">&nbsp;</span></nobr></td>
                    <td style="min-width:99.4px; max-width:99.4px">
                    <nobr><span class="">&nbsp;</span></nobr></td>
                    <td style="min-width:99.4px; max-width:99.4px">
                    <nobr><span class="">&nbsp;</span></nobr></td>
                    <td style="min-width:123.16px; max-width:123.16px">
                    <nobr><span class="">&nbsp;/span></nobr></td>
                    <td style="min-width:99.4px; max-width:99.4px">
                    <nobr><span class=""></span></nobr></td>
                    <td style="min-width:93.46px; max-width:93.46px">
                    <nobr>&nbsp;</nobr></td>
                    <td style="min-width:93.46px; max-width:93.46px">
                    <nobr>&nbsp;</nobr></td>
                    <td style="min-width:93.46px; max-width:93.46px">
                    <nobr>&nbsp;</nobr></td>
                    <td class='sort' style=
                    "min-width:93.46px; max-width:93.46px">
                    <nobr>&nbsp;</nobr></td>
                </tr>
            </tbody>
        </table>
    </div>
<script>
$(document).ready(function() {
    setScroll('summary_header', 'summary_table');
});
</script>

回答1:

Since I couldn't deduce the version of IE I will assume it to be >10 so if you want fine control over your animations I recommend using requestAnimationFrame.

来源：https://stackoverflow.com/questions/39312873/how-do-i-prevent-page-flicker-in-ie-which-does-not-appear-in-firefox