How to initially hide a div without a flash?

Question

I have a slide up / down div. Because you cannot have it slide up out of view with just CSS, I'm instead using JavaScript like this:

showHideElement = (element, open) => {
  if (open) {
    element.style['margin-top'] = 0;
  } else {
    element.style['margin-top'] = -element.scrollHeight + "px";
  }
}

I then have a button that the user can click to toggle the div in or out of view. This all works fine.

The problem is that I want to be able to save the user's preference, such that if they toggle the div out of view, the next time they refresh the page it is already toggled out of view. This is done using localstorage.

The issue I'm having is that in order to determine the margin-top, the element has to first be rendered, so that its scrollHeight can be found. This is causing a "flash" when the user refreshes the page, wherein they see the div for a moment slide out of view.

I desire a solution where the div is already out of view when the user loads the page, but how can that be determined without first rendering it to determine the scrollHeight so that its margin-top can be set?

@HarishSharma Unfortunately that doesn't seem to work. See my reply to lizzors. — Ryan Peschel, Jun 17 '20 at 16:44
I did that long ago, I implemented smooth animation for show/hide operation on list. It removes the sudden flash. — harish kumar, Jun 17 '20 at 16:48
I don't understand what you're saying. That I should have a loading spinner or something instead? I really rather just solve this. — Ryan Peschel, Jun 17 '20 at 16:49
Checkout https://stackoverflow.com/questions/31305071/measuring-text-width-height-without-rendering — harish kumar, Jun 17 '20 at 16:51
I am not measuring text width or height. This div contains many elements and custom components. — Ryan Peschel, Jun 17 '20 at 16:54
Can you try `visibility: hidden` with `position: absolute`. It won't create a white rectangle. When rendering is done. You can reset `position` to default value — harish kumar, Jun 17 '20 at 17:00
@HarishSharma That worked. You can add it as an answer if you'd like and I'll accept it. — Ryan Peschel, Jun 17 '20 at 17:11
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/216152/discussion-between-harish-sharma-and-ryan-peschel). — harish kumar, Jun 17 '20 at 17:19

score 1 · Accepted Answer · answered Jun 17 '20 at 17:14

You need to calculate element height, which is possible by rendering element.

You can try visibility: hidden with position: absolute. It won't create a white rectangle.

When rendering is done. You can reset position e.g position: unset (or default value).

score 0 · Answer 2 · answered Jun 17 '20 at 16:43

0

try setting it to display:none or visibility: hidden

answered Jun 17 '20 at 16:43

lizzors

29
7

`display: none` doesn't work because then the measured height (scrollHeight) is 0. `visibility: hidden` doesn't work because then it's instead a white rectangle that is flashed instead. – Ryan Peschel Jun 17 '20 at 16:44
`visibility:hidden; opacity: 0` instead – Tyr Jun 17 '20 at 17:06

How to initially hide a div without a flash?

2 Answers2