CODEWITHSUNDEEP
javascripthtmlcss
Vahe
Vahe

Reputation: 1841

Scrollable table sorting - How to suppress artifacts of horizontal scroll position translation, in order to preserve scroll position?

I want to sort a table that can be scrolled horizontally as the table is wider than the browser width. I am using PHP/JS but not using AJAX.

The problem is when I scroll to the right to sort on the rightmost column, I need to preserve the horizontal scroll position when sorting.

What I did was to fake the position by first using JS to scroll to the position. But that happens after page load. So I "see" translation.

So, to fake it, I used css to immediately translate (transform) the element to the right. Then when page loads I immediately translate to the left in JS (using the css transform, to restore position) then I use JS to scroll to the desired position.

Firefox and Edge do not have an issue doing this and don't show any intermediate translation flicker or artifacts.

Only my IE 11 shows the artifact of translation on page load.

How do I suppress this flicker effect in IE so the user only sees the table being sorted at its desired position?

I have provided some code in an earlier post

How do I prevent page flicker in IE which does not appear in Firefox?

Upvotes: 4

Views: 602

Answers (1)

norcal johnny
norcal johnny

Reputation: 2115

I am not sure if you are looking for jquery or css solution so I will post what I have seen as a workable css solution..but the jquery being the most used. I always prefer css when possible where styling is considered.

<!--[if IE]>
<meta http-equiv="Page-Enter" content="blendTrans(duration=0)" />
<meta http-equiv="Page-Exit" content="blendTrans(duration=0)" />
<![endif]-->

Upvotes: 1

Related Questions