मैं आईई में पेज फ्लिकर को कैसे रोकूं जो फ़ायरफ़ॉक्स में दिखाई नहीं देता है?

Question

मेरे पास एक पृष्ठ है जो स्क्रीन के दाईं ओर एक टेबल को स्थानांतरित करने के लिए 2 डी में अनुवाद पर निर्भर करता है यदि पृष्ठ पुन: सबमिट करने से पहले मेरी स्क्रॉल स्थिति दाईं ओर स्क्रॉल हो जाती है।

जिस प्रभाव को मैं कैप्चर करने का प्रयास कर रहा हूं वह एक सारणी है जो तालिका को सॉर्ट करते समय दाईं ओर स्क्रॉल की जाती है (निश्चित शीर्षलेख, सीमित ऊंचाई निकाय, ओवरफ़्लो स्क्रॉल)।

फ़ायरफ़ॉक्स, यहां तक ​​कि आश्चर्यजनक रूप से एज झिलमिलाहट नहीं करता है, केवल आईई झिलमिलाहट जब मैं इस प्रभाव का उपयोग करता हूं।

इस परेशान आईई पेज फ्लिकर को खत्म करने के लिए मैं अपने सीएसएस अनुवाद की कलाकृतियों को कैसे दबा सकता हूं?

यह पिछले कोड से संबंधित है जो मैंने प्रदान किए गए कोड के साथ बनाया है।

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

एचटीएमएल टेबल

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

Answer 1

जब से मैं मुझे लगता है जाएगा IE के संस्करण अनुमान नहीं कर सकता है यह> 10 इसलिए यदि होने के लिए आप अपने एनिमेशन पर अच्छा नियंत्रण चाहते हैं, मैंका उपयोग करने की सलाह देता हूं।