javascript - Sticky absolute DIV flickering in IE and Safari - Stack Overflow

admin管理员组

文章数量:1425860

Please have a look at this fiddle. Code is huge to post.

I am trying to make two DIVS stick to the top and left inside a dynamically updated DIV. It is working but flickering is happening inside the DIV. How can I remove the flickering.

Please help me on this.

Code written to fix:

 colFix.style.left = (holder.scrollLeft - view.offsetLeft) + "px";
 heaF.style.top = (holder.scrollTop - view.offsetTop) + "px";

Please have a look at this fiddle. Code is huge to post.

I am trying to make two DIVS stick to the top and left inside a dynamically updated DIV. It is working but flickering is happening inside the DIV. How can I remove the flickering.

Please help me on this.

Code written to fix:

 colFix.style.left = (holder.scrollLeft - view.offsetLeft) + "px";
 heaF.style.top = (holder.scrollTop - view.offsetTop) + "px";

• javascript
• jquery

Share Improve this question Follow edited Sep 28, 2013 at 20:26 Exception asked Sep 1, 2013 at 7:24 ExceptionException 8,3892424 gold badges8888 silver badges141141 bronze badges 7

• take a look at this [positioning][1] [1]: stackoverflow./questions/1216114/… – Milad Hosseinpanahi Commented Sep 1, 2013 at 7:39
• 1 I think you're overdoing this. 1. That's a tabled data you've got there. Why aren't you using a real table? 2. Maybe this thread will help you imaputz./cssStuff/bigFourVersion.html – Itay Commented Sep 1, 2013 at 7:40
• Your fiddle is way too full of code and you haven't specified what we're supposed to look at in the example. – Geuis Commented Sep 1, 2013 at 7:42
• @Geuis In the fiddle from line number 104 - 119 I am appending sticky headers. – Exception Commented Sep 1, 2013 at 7:55
• @user2675751 I am looking for the same and doing the same code here also, I would like to avoid the flickering happening. – Exception Commented Sep 1, 2013 at 7:57

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 8 +50

The flashing you are seeing is because your elements are reinserted into the DOM. In this case, and specifically in IE10, they flash from the bottom to the top because you use .appendChild, so it renders at the bottom of the page then flashes to the top once the CSS applies.

The flashing from bottom to top can be fixed by using .insertBefore:

view.insertBefore(colFix, view.firstChild);

This does not fix the problem entirely, as it will continue to flash every time it is reinserted - just at the top now.

One way to stop the flashing is to stop reinserting the entire block, but keep a wrapper in place which has its content re-populated. This may still cause a visible jump, but I leave that to you to experiment.

---

Previous experimentation below, kept for the sake of others who may try and answer. The above provides the answer to the core question of "How can I remove the flickering" - i.e. stop continuously reinserting layout elements.

Here is a fiddle

This changed #col-fixed and #head-fixed to position: fixed; and then in the javascript I changed lines where you appendChild to insertBefore the first child - this may not have any relevance once position: fixed was applied.

view.appendChild(heaF);

view.insertBefore(colFix, view.firstChild);

I also mented out:

colFix.style.left = colHF.style.left = (holder.scrollLeft - view.offsetLeft) + "px";
heaF.style.top = colHF.style.top = (holder.scrollTop - view.offsetTop) + "px";

You can try using iScroll plugin. link .

This will keep the scroll bar and that too with no flickers but, for this to work you will need to have two divs. Have a look into this example.

Also if not reusing iScroll,you can modify the code on similar to iScroll (removing not-required features).

Example link :- a link

本文标签： javascriptSticky absolute DIV flickering in IE and SafariStack Overflow