Using Foundation with a Full Size Hero Header (in the Impact Stack), and the header is set to "Remove after Scroll).
The problem is: either by manually scrolling to the content area, or clicking the scroll button to automatically go to the content area, at the point where the header “disappears”, the entire content area glitches briefly. It appears that for a few milliseconds, the full screen header appears (full screen) at the moment that it is disappearing from the (now) offscreen portion of the page. It is fast, but noticeable. Unfortunately, it is also a bit random. You might see it on the first try, it might take a couple of refreshes before you see it.
This isn’t a huge issue, but it is unacceptable and cuts into the quality of the presentation.
The slight glitch is inevitable. When Impact is removed from the page Foundation has to execute a “reflow”. This will redraw all the page content but is necessary to ensure that all the elements know where they are. Without this, for example, a sticky topbar would not stick in the correct position as the page has changed in height since the initial load.
Thanks Zeebe. That code is from GoLive tracking. Not sure why it is showing up as an error, but I deleted the code from the tools menu in Rapidweaver. Problem still exists. I appreciate the effort though.
Hi Tav,
I can accept a slight glitch in the form of a brief hesitation or maybe even a rough (scrolling) stop as the full screen header has to be removed (off-screen) from the page… but not a full screen glitch that appears to reveal the original full screen header for a few milliseconds. Besides, the issue reveals itself only randomly, not every time. I don’t think this would qualify as releasable product with that kind of glitch. Not sure who would use this product if that is an expected behavior. I’m wondering if this has anything to do with the fact that I have the same full-screen header placed on the page twice, once for tablets and desktop and once for mobile. (each with the correct “hide” buttons selected in the Responsive column.)
The problem (as listed above) only occurs in Safari. I cannot replicate the issue in Google Chrome or Firefox. THAT SAID, a different (yet VERY similar) problem appears in Chrome and Firefox, it just happens when the page is loading, (as opposed to the problem in Safari when the header is scrolled off the page). When the page loads in Chrome and Firefox, you see the EXACT same kind of full-screen glitch within a few milliseconds of the page first appearing. Interesting.
If you look at Joes demo page where the Impact stack is removed https://preview.joeworkman.net/impact/controls/
then you will see a slight flash as the removal happens. If you have 2 Impact stacks in visibility stacks then you are going to repaint the screen twice. The amount of flicker you get is going to depend on how hard the browser has to work to repaint the page content. Like many features in stacks, you can always combine things in a way to give undesirable results and not every feature will work as you want in all circumstances. I think it is a bit harsh to say “I don’t think this would qualify as releasable product with that kind of glitch”, but that is just my opinion.
The initial “Glitch” as you describe in Chrome and FF is just a flash of unstyled content (FLOUC) this occurs as the HTML loads before all the CSS has necessarily loaded and the JS has run. This is quite normal with pages with a lot of image content and elements that require javascript and happens to improve loading speed of simple pages. This is not a RW only issue and is a common effect - just google it. All you need to do is to enable the Foundation loader to the Site Styles stack. By enabling this you can hide the initial FLOUC with a brief loading Screen.
Hi Tav, Thanks so much for the information! You are awesome. I am not a tech guru, just a photographer trying desperately to make a nice website to generate income. I really appreciate the time you took to explain things to me. The glitch that I see after the full size header scrolls off the page is enough for me to rethink that element of my site. I know I sounded harsh about this, but I have spent so much time looking at higher end (i.e. expensive) sites in researching how I want my site to look, that this glitch, albeit brief, takes away some of the smooth finesse that I want my site to exhibit. Anyway, again, I really appreciate the time you took with me. Take care.
Matt
I totally agree and I wouldn’t want it either. I think you have the correct approach though now. Use combinations of elements that work well together and look as polished as possible. Many stacks give a huge amount of features but often less is more and it is always a case of getting things to sympathetically work together in each particular site.
Agreed. I kept the full size header, but turned off the disappearing trick. I DID however turn on the “Show only once per session” option. Since this is a video gallery chooser, the visitor will return to this page multiple times and I didn’t want them to be spammed by that full page header. the “Show only once” option seems to work really well and the experience for the visitor is much more seamless. Thanks again for your input and help. Matt
