HTML5 output – "flicker" when including breadcrumbs

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
Fiona
Sr. Propeller Head
Posts: 117
Joined: Tue Jan 27, 2015 7:44 am
Location: U.K.

HTML5 output – "flicker" when including breadcrumbs

Post by Fiona »

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
PoojaTiwari
Jr. Propeller Head
Posts: 8
Joined: Thu Sep 12, 2019 10:26 pm

Re: HTML5 output – "flicker" when including breadcrumbs

Post by PoojaTiwari »

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.
Madcap Certified Advanced Developer
:flare:Image
Fiona
Sr. Propeller Head
Posts: 117
Joined: Tue Jan 27, 2015 7:44 am
Location: U.K.

Re: HTML5 output – "flicker" when including breadcrumbs

Post by Fiona »

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!
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: HTML5 output – "flicker" when including breadcrumbs

Post by NorthEast »

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.:

Code: Select all

div.breadcrumbs
{
   min-height: 1.5em;
}
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.
Fiona
Sr. Propeller Head
Posts: 117
Joined: Tue Jan 27, 2015 7:44 am
Location: U.K.

Re: HTML5 output – "flicker" when including breadcrumbs

Post by Fiona »

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!
Post Reply