I’m just finishing up my first Rapidweaver website based on Foundation and have a few problems that I am looking for advice on.
Desktop issues:
Upon initially loading the page the Impact header is not present and the remaining content is mis-aligned. Then Impact loads its images and appears, shifting everything downwards. This happens quite quickly so may not be a massive problem, but it is just a little disappointing. Is there a way to prevent this?
Mobile Issues:
The Topbar is set to only show the full menu on desktop. However, when I view the site on an tablet, the full menu gets displayed incorrectly - often with a white background that makes the buttons unuseable. If I scroll down the page, sometimes the menu suddenly appears and looks fine. I’m not sure what is going on here.
Again with the topbar, on a mobile device (iPhone 6 in this case), when i press the menu button, it is displayed correctly, but the menu text overlaps the first menu button.
On the ‘About Us/Our Dogs’ page, I use the Focus stack. When you click on ‘More info’ for any of the dogs, the Focus stack content appears, but when you scroll up and down, the page has a horrible ‘Jitter’ to the rendering. Not sure why this may be?
Use a custom break point for Topbar and set it to 1025 or something close.
Again with the topbar, on a mobile device (iPhone 6 in this case), when i press the menu button, it is displayed correctly, but the menu text overlaps the first menu button.
Your Title is too long, I suggest you check Hide Title and Hide Slogan on mobile. You might be able to just hide the slogan and keep the title.
On the ‘About Us/Our Dogs’ page, I use the Focus stack. When you click on ‘More info’ for any of the dogs, the Focus stack content appears, but when you scroll up and down, the page has a horrible ‘Jitter’ to the rendering. Not sure why this may be?
I do not see any jitter on any of the focus stacks on my end. But if you think, it would have to do more with Focus than Foundation so I would contact Elixir.
Impact should reserve the space needed for itself to stop the content shift that you are seeing.
There are possible several reasons that you are not this happen. Firstly it may be that something else is delaying execution.
Try a test page without the embedded youtube videos that autoplay - this is the most likely cause and worth eliminating before investigating further.
You can see that it is still doing it. I do notice the preloaded image whilst it is loading, but it doesn’t allocate the space required and the footer gets moved once the images are loaded.
Also, If you look at some of the other pages on my site you can see the same thing happening, so its not local to an individual page.
What is happening is that the page is rendering as soon as the CSS has loaded and slightly before the javascript has had time to size the Impact in its pre-load state. This is a consequence of the very fast lazy loading of CSS in Foundation. You have 2 choices. Firstly you could simply add the Foundation loader in site styles, but in my opinion this is overkill (and I hate loaders, especially to mitigate a fast loading site - it just seems contrary).
Secondly, and what I would do is simply apply a little CSS in the page inspector to pre-size your impact stack in its pre-load state. As soon as the Javascript sizes the stack proportionally, it will remove the impact-preload class anyway so you have no worries about this code affecting the stack after the initial page load.
I have made a little demo of the principle in action http://sandbox.bigwhiteduck.com/tests/impact-preload/
There are 2 pages - linked by buttons. The home page has the CSS, the other page does not and you can clearly see the flash of unstyled content, directly analogous to your situation.
So to the CSS…
It is all dependent on the aspect ratio selected in Impact which you will need to match. I see you have yours set to 21:9, which as it says in the settings is 42% height as a proportion of the width. It is actually 42.6 so we will use 43 in the following CSS.
We can apply a proportional height because your Impact is full width. The width of the browser is defined in browser units as 100vw and so our 43% we will simply assign the preload height to simply be 43vw
So in your page inspector enter the following
height:43vw!important;
}```
Again, the class of impact-preload will be removed as soon as the page is fully loaded and the javascript runs, so after the initial problem period this code will apply to nothing.
Really nice site - well done! Looks pro. Just did my first Foundation site recently- actually my first site ever - not as nice as yours but it works. Take a look - any comments or suggestions welcome. http://charlestoncottage.com - compare with old site: http://legacy.charlestoncottage.com
I still need to recreate the old page and do a gallery.
Cheers- keep it up!
Final problem, that only seems to manifest on mobile devices (iPhone 6 for me)…
The Menu top bar disappears and reappears seemingly randomly when scrolling down and then back up. I think it should remain staid - it does on the desktop site.
