page shifts up on browser refresh

  • 1
  • Problem
  • Updated 3 years ago
  • Solved
I have a new Case page with a custom Skuid header and footer and when I refresh the page in Chrome the page shifts up and I almost loose the page title. 

First time page load with the expected white space between the header and page title.

 

After browser refresh.



I'm getting this in chrome and had it happen once in FF but can get it to reproduce again in that browser. 
Skuid Version 7.27
Photo of Jason C

Jason C

  • 682 Points 500 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Here is what I think is going on.  You have a custom skuid header exposed and you have made that header sticky - so it always shows at the top of the page.  In that header you have an image.  When the page loads the sticky header calculations fire to push the page title down by the width of the header.  This happens before the image is loaded,  and so when the extra height of the image is added to the header is pushes it over the underlying page. 

If you go to your div where you are showing your image and add a predefined height there - rather than just depending on the image to provide its own height - then the height will be known before the sticky header calculations are fired.  And things will look better. 

PS - my next band will be called Sticky Header Calculations.  We will play infectious pop with mathematical precision.. 
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
I once was in a band with a bunch of Physics majors called "Assume a Spherical Cow"
Photo of Jason C

Jason C

  • 682 Points 500 badge 2x thumb
Thanks Ben, I wasn't too sure how to implement what you suggested but I put my header inside of a wrapper component and defined the height there. The page is displaying correctly now in both browsers. 

BTW I look forward to your studio album!