Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>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 <code>.appendChild</code>, so it renders at the bottom of the page then flashes to the top once the CSS applies.</p> <p>The flashing from bottom to top can be fixed by using <code>.insertBefore</code>:</p> <p><code>view.insertBefore(colFix, view.firstChild);</code></p> <p>This does not fix the problem entirely, as it will continue to flash every time it is reinserted - just at the top now.</p> <p>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.</p> <hr> <p>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.</p> <p><a href="http://jsfiddle.net/c73qJ/" rel="nofollow">Here is a fiddle</a></p> <p>This changed <code>#col-fixed</code> and <code>#head-fixed</code> to <code>position: fixed;</code> and then in the javascript I changed lines where you appendChild to insertBefore the first child - this may not have any relevance once <code>position: fixed</code> was applied.</p> <pre><code>view.appendChild(heaF); view.insertBefore(colFix, view.firstChild); </code></pre> <p>I also commented out:</p> <pre><code>colFix.style.left = colHF.style.left = (holder.scrollLeft - view.offsetLeft) + "px"; heaF.style.top = colHF.style.top = (holder.scrollTop - view.offsetTop) + "px"; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POSticky absolute DIV flickering in IE and Safari
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USRoss
    1. USRoss
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. CODisadvantage with `fixed` here is, I will not be able to scroll putting mouse on Fixed element. Next is it will position according to the screen, extra effort needed to make it aligned with the element on resize of window
      singulars
      1. PO
      1. USException
    2. COSo from what I think I understand from your code (which could be very wrong, sorry) is that you replace the entire absolutely positioned div and add it back in on scroll. If that's the case, then I would try only replacing the content of the absolutely positioned div. Did that make sense?
      singulars
      1. PO
      1. USRoss
    3. COYou are right that the best option is to keep the container and replace the children. The other alternatives you mention cause a reflow, which is part of the FOUC that is happening.
      singulars
      1. PO
      1. USJason
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload