如何防止 IE 中的页面闪烁而 Firefox 中没有出现？
Posted
技术标签:
【中文标题】如何防止 IE 中的页面闪烁而 Firefox 中没有出现？【英文标题】：How do I prevent page flicker in IE which does not appear in Firefox? 【发布时间】：2017-01-11 18:41:00 【问题描述】：如果我在重新提交页面之前的滚动位置向右滚动，我有一个依赖 2d 转换的页面将表格移动到屏幕右侧。
我试图捕捉的效果是在对表格进行排序时向右滚动的表格（固定标题、有限高度正文、溢出滚动）。
火狐，居然Edge不闪烁，我用这个效果时只有IE闪烁。
如何抑制 CSS 翻译的伪影以消除这种烦人的 IE 页面闪烁？
这与我之前使用提供的代码创建的帖子有关。
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 表格
<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> ▲</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">
<!--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> </nobr></td>
<td style="min-width:449.86px; max-width:449.86px">
<nobr> </nobr></td>
<td style="min-width:105.34px; max-width:105.34px">
<nobr> </nobr></td>
<td style="min-width:123.16px; max-width:123.16px">
<nobr><span> </span></nobr></td>
<td style="min-width:123.16px; max-width:123.16px">
<nobr><span> </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> </span></nobr></td>
<td style="min-width:111.28px; max-width:111.28px">
<nobr><span class=""> </span></nobr></td>
<td style="min-width:99.4px; max-width:99.4px">
<nobr><span class=""> </span></nobr></td>
<td style="min-width:99.4px; max-width:99.4px">
<nobr><span class=""> </span></nobr></td>
<td style="min-width:123.16px; max-width:123.16px">
<nobr><span class=""> /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> </nobr></td>
<td style="min-width:93.46px; max-width:93.46px">
<nobr> </nobr></td>
<td style="min-width:93.46px; max-width:93.46px">
<nobr> </nobr></td>
<td class='sort' style=
"min-width:93.46px; max-width:93.46px">
<nobr> </nobr></td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function()
setScroll('summary_header', 'summary_table');
);
</script>
【问题讨论】：
您能否提供一些代码，它需要最少数量的代码来证实您遇到的问题，没有任何代码我们无法提供帮助 【参考方案1】：由于我无法推断 IE 的版本，我假设它是 >10，所以如果你想更好地控制你的动画，我建议使用 requestAnimationFrame。
【讨论】：
感谢您的回复，。澄清一下，我的闪烁伪影是页面显示水平平移而不是隐藏它。我之前没有使用过 requestAnimationFrame。在对最右侧的表格标题单元格进行排序时，我想避免看到水平平移之间的中间（即向左平移然后向右平移）。 我的例子的重点是在页面重新加载时保持滚动，并且不会闪烁。通过上述建议，我很难实现上述目标。如果它可以解决问题，我不确定如何使用它。以上是关于如何防止 IE 中的页面闪烁而 Firefox 中没有出现？的主要内容，如果未能解决你的问题，请参考以下文章