flicker

flicker

关注
发信
关注(28)粉丝(399)

我如何防止IE中出现的Firefox中没有出现页面闪烁？

本文介绍了我如何防止IE中出现的Firefox中没有出现页面闪烁？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述



如果页面重新提交前的滚动位置滚动到右侧，我有一个页面依赖于2D中的翻译将表格移动到屏幕右侧。 >我试图捕获的效果是在对表格进行排序时滚动到右侧（固定标题，高度有限的正文，溢出滚动）的表格。

Firefox，甚至令人惊讶的是，边缘不闪烁，只有当我使用这种效果IE浏览器闪烁。

我如何抑制我的CSS翻译的工件，以消除这个恼人的IE页面闪烁？ / p>

这与我使用提供的代码创建的以前的帖子有关。 $ b



jQuery 

 函数setScroll（id_header，id_table）
 {
 $（'div。'+ id_table）.on（scroll，function（）{//当#center滚动时激活
 var left = $（'div。'+ id_table）.scrollLeft（）; //将#center位置保存到var left 
 $（'div。'+ id_header）.scrollLeft（left）; // set #top to var left 
 $（'＃scrollamount'）。val（left）; 
}）; 
 $ b $（'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表格 $ b 

 < div class =summary_header> 
 transform：translateX（0px）> 
< thead class =header> 
< tr> 
< th class =editstyle =min-width：34px; max-width：34px> 
编辑< / th> 
< th style =min-width：34px; max-width：34px> 
 < a onclick =$（'＃summaryform'）。attr（'action'，'allactionitems.php？orderby = ActionItemID& dir = DESC& load = 1'）; #summaryform'）提交（）;> 
 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'）提交（）;> 
 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'）提交（）;> 
严重性< / 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'）提交（）;> 
转让人< / 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'）提交（）;> 
所有者< / 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'）提交（）;> 
 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'）提交（）;> 
批准者< / 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'）提交（）;> 
 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'）提交（）;> 
 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'）提交（）;> 
 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'）提交（）;> 
 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'）提交（）;> 
 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'）提交（）;> 
 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'）提交（）;> 
 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'）提交（）;> 
 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'）提交（）;> 
 Category4< / a> &安培;＃9650;< / NOBR>< /第> 
< / tr> 
< / thead> 
< / table> 
< / div> 
< div class =summary_table overflow_tablestyle =overflow-x：hidden> 
< table border =1id =summary_tablestyle =transform：translateX（0px）> 
< tbody> 
< tr class =row_evenid =row1> 
< td class =editstyle =min-width：34px; max-width：34px> 
& nbsp; &安培; NBSP; &安培; NBSP; &安培; NBSP; &安培; NBSP; 
<！ -  input type =submitvalue =Editstyle =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> 
 
 
解决方案
由于我无法推断IE I的版本将假定它> 10，所以如果你想精细控制你的动画，我推荐使用 requestAnimationFrame 。

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>

 解决方案 
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.
这篇关于我如何防止IE中出现的Firefox中没有出现页面闪烁？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-15 11:00
Powered by LMLPHP ©2024 flicker 0.031760