Drop-down body content displays momentarily on page load

[TheGreatAndPowerfulOz]

Hello, all.

I just built a project using an HTML5 Top Navigation template, and I've discovered that when any page containing drop-downs is loaded, the (normally hidden) content of each drop-down is momentarily displayed on screen. After that, the drop-downs function as expected, but the fact that they initially "flash" their content is a bit distracting and isn't at all desirable or normal. By the way, I've seen this behavior using Chrome (65), IE (11) and MS Edge (38); tests in Firefox (52 ESR) are all good.

In the example below, the images in the body of the page are the dropdown contents.

Just before completion of page load:

DropdownContentFlash.png

After completion of page load:

DropdownContentHidden.png

I can't say that this behavior is in any way related specifically to Top Navigation output, but I do know that I've never seen it in any of my Tripane project output (which I've been using for years now and definitely would have noticed).

I thought a quick workaround might be to explicitly set the "display" property of the "dropDownBody" class in the style sheet to "none", but that didn't seem to have any effect on the behavior. Has anybody else experienced this and come up with a cause and solution?

Thanks in advance for any insights you may have!

[TheGreatAndPowerfulOz]

I really couldn't take the "flashing" of drop-down content on page load any longer, so I spent some time today in an effort to get to the bottom of it! I'm pleased to report that I've come up with a working solution (a workaround), to override what I believe to be a flaw in the way Flare creates drop-down DOM elements in HTML5 output topics.

It turns out that I was pretty close to the answer with my original hunch...

I thought a quick workaround might be to explicitly set the "display" property of the "dropDownBody" class in the style sheet to "none", but that didn't seem to have any effect on the behavior.

... I just hadn't looked thoroughly enough to uncover the source of the issue.

I discovered that when Flare creates HTML5 output topics containing drop-down DOM elements, the class "MCDropDown_Open" is applied to them by default:

Code: Select all

<div class="MCDropDown MCDropDown_Open dropDown">

I also found that the "TextEffects.css" style sheet that gets generated contains the following rule set:

Code: Select all

.MCDropDown_Open .MCDropDownBody
{
	display: block;
}

This CSS rule set makes perfect sense, in that we would definitely want the "MCDropDownBody" element to display when its parent drop-down element gets the class "MCDropDown_Open" class applied. The trouble is that since that class is applied by default, the "MCDropDownBody" content is displayed immediately as the page loads, and only gets hidden after the page finishes loading. At that point, the DOM looks like the following sample:

Code: Select all

<div class="MCDropDown dropDown MCDropDown_Closed" data-mc-state="closed">
  <span class="MCDropDownHead dropDownHead">[irrelevant drop-down head code]</span>
  <div class="MCDropDownBody dropDownBody" style="display: none;">
      <p>[Drop-down body content]</p>
  </div>
</div>

I didn't bother to delve into exactly what goes on in Flare code, but you can see above that the result in the DOM is:

1. The default "MCDropDown_Open" class designation on the drop-down element is swapped for "MCDropDown_Closed"
2. The drop-down element gets a "data-mc-state" attribute with the value "closed"
3. The "MCDropDownBody" element gets a "style" attribute with the property/value set of "display: none;"

So, my little CSS hack to get around the momentary display of the "MCDropDownBody" element on initial page load was to add the following rule set to my main style sheet (to override what's found in the "TextEffects.css" style sheet):

Code: Select all

.MCDropDown_Open .MCDropDownBody
{
  display: none;
}

Since the "MCDropDownBody" element is not displayed by default, based on the additional CSS declaration, there is no "flashing" of content on page load. When the user clicks the drop-down head hotspot text, associated Flare JavaScript code kicks in and allows the content to be shown or hidden on demand (the CSS hack doesn't interfere at all).

I'm about to submit a bug to MadCap on this issue, recommending they simply apply the "MCDropDown_Closed" class to drop-down elements in the DOM by default, rather than "MCDropDown_Open". After all, the idea of a drop-down is to initially have its contents hidden, then allow the user to show the contents on click of the drop-down header hotspot text—Why on earth should the drop-down element have the "MCDropDown_Open" class applied by default?

As I mentioned in my original post, I've never seen the "flashing" content behavior in my projects with Tripane output (even though drop-down DOM elements there also have the "MCDropDown_Open" class applied by default), but it was definitely an issue for Top Navigation output.

I hope this workaround will help anyone else who's noticed this issue.