[Resolved] page refresh making kind of overlay of two views

[Author]

Posts

[rexJ-2]

I am trying to:
I have a timetable where the timeslots are working. I want to refresh the page every 5 min. but when the page refresh - also page manually refresh - date timeslot gets updated but it is as if the view get wide and then get to normal like Glitches or two views fast after each other. So when monitor update it looks awfull. Is there a solution for that?
I have tried to use javascript and css,

<scrips>
 $(window).load(function () {
        $("#tabs").removeClass("hideAll");
    });
</script>
and css
<style type="text/css">
    .hideAll  {
        visibility:hidden;
     }
</style>
and then in view
<div id="tabs" class="hideAll">
   ##Content##
</div>

Link to a page where the issue can be seen:
hidden link
I expected to see:
One screen as html page that refresh directly on top of previous loaded page. Eventually possibility to refresh page completely and the show page!
Instead, I got:
Glitches from something behind. Looks as if the repeat form with images first get loaded and for a second shows and then the right page with all data get loaded correctly.

[Nigel]

Hi there

Do you have a page where I can see the problem on the front-end and see how you have made the page on the back-end?

I can't really tell what the problem is from your description.

Let me mark your next reply as private so that I can get log-in credentials from you—you may want to create a temporary admin user for me to use that you can later delete. And be sure to have a current backup of your site.

[Nigel]

OK, I think the issue is because of how the custom CSS from your Views are added.

When the server is building the page, by the time we get to your wpv-view shortcodes that insert the Views we are already in the HTML body. In HTML4 CSS within the body was invalid (although it typically worked), and so the implementation was updated so that the custom CSS is added as a DIV within the body and then it is hoisted by JS into the HTML head to be HTML4 compliant.

So there can be a lag between when your View results are output on the screen and when the CSS gets hoisted to the head and becomes effective in styling them. So you see FOUC ("Flash Of Unstyled Content").

We have plans to revise this (there is no such compliance issue in HTML5) but for the time-being what you can do is move your CSS out of the custom CSS box.

I suggest you add it directly into the relevant editor sections (e.g. the Loop Editor just before the wpv-layout-end shortcode) inside style tags, e.g.

<style type="text/css">
.my-class {
  border: 1px solid red;
}
</style>
[wpv-layout-end]

[rexJ-2]

Moved everything to <style> in layout as mentioned and problem with glitches is solved. My issue is resolved now. Thank you!