I am generating HTML5 output with a breadcrumb trail at the top of each page.
When viewing it, the page seems to draw without the breadcrumbs in, then redraw with the breadcrumb trail, causing the whole screen to flicker. Is anyone else having this issue and, more importantly, has anyone had this issue and found a workaround?
(To see what I mean by "flicker", see help.dyalog.com)
Thanks. Fiona
HTML5 output – "flicker" when including breadcrumbs
-
- Jr. Propeller Head
- Posts: 8
- Joined: Thu Sep 12, 2019 10:26 pm
Re: HTML5 output – "flicker" when including breadcrumbs
Hi Fiona,
I have checked the issue that you are facing on "help.dyalog.com". I guess you are using breadcrumb proxy in the topic file. So when the topics visited this generated again and show flicker.
Try breadcrumbs proxy on the masterpage before body proxy. I hope flicker on page will fixed with this.
I have checked the issue that you are facing on "help.dyalog.com". I guess you are using breadcrumb proxy in the topic file. So when the topics visited this generated again and show flicker.
Try breadcrumbs proxy on the masterpage before body proxy. I hope flicker on page will fixed with this.
Madcap Certified Advanced Developer
Re: HTML5 output – "flicker" when including breadcrumbs
Hi PoojaTiwari and thank you for the suggestion.
Unfortunately I already have the breadcrumb proxy in the MasterPage (before the topic body proxy). Any other suggestions? I'm completely stumped so welcome any ideas!
Unfortunately I already have the breadcrumb proxy in the MasterPage (before the topic body proxy). Any other suggestions? I'm completely stumped so welcome any ideas!
Re: HTML5 output – "flicker" when including breadcrumbs
It happens because the breadcrumbs proxy is initially empty when you open the page, and then it's populated by MadCap's scripts which bumps the rest of the topic content downwards.
A quick and dirty fix would be to make sure the breadcrumbs always take up a fixed amount of space using min-height; e.g.:
There are probably more sophisticated ways to handle this; e.g. you can use scripts that can wait for MadCap's scripts to finish loading.
This is quite a common problem in web design generally, where you see parts of the page shuffle or use incorrect styling until the page finishes loading.
A quick and dirty fix would be to make sure the breadcrumbs always take up a fixed amount of space using min-height; e.g.:
Code: Select all
div.breadcrumbs
{
min-height: 1.5em;
}
This is quite a common problem in web design generally, where you see parts of the page shuffle or use incorrect styling until the page finishes loading.
Re: HTML5 output – "flicker" when including breadcrumbs
Thank you Dave, that definitely reduces the flicker; the remaining flicker is minimal and due to the breadcrumbs being added after the rest of the page, but it's infinitely preferable to the whole-page-redraw that was happening!