HTML5 output – "flicker" when including breadcrumbs

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets

HTML5 output – "flicker" when including breadcrumbs

Postby Fiona on Mon Oct 21, 2019 5:33 am

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
Fiona
Propeller Head
 
Posts: 84
Joined: Tue Jan 27, 2015 7:44 am
Location: U.K.

Re: HTML5 output – "flicker" when including breadcrumbs

Postby PoojaTiwari on Thu Nov 07, 2019 1:37 am

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

Re: HTML5 output – "flicker" when including breadcrumbs

Postby Fiona on Tue Nov 12, 2019 4:17 am

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!
Fiona
Propeller Head
 
Posts: 84
Joined: Tue Jan 27, 2015 7:44 am
Location: U.K.

Re: HTML5 output – "flicker" when including breadcrumbs

Postby Dave Lee on Tue Nov 12, 2019 5:37 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5749
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: HTML5 output – "flicker" when including breadcrumbs

Postby Fiona on Fri Nov 29, 2019 2:32 am

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!
Fiona
Propeller Head
 
Posts: 84
Joined: Tue Jan 27, 2015 7:44 am
Location: U.K.


Return to Web-based Outputs

Who is online

Users browsing this forum: No registered users and 5 guests