Mouse over changes colour of text

[ogaleswapnil]

I've been publishing an HTML5 output successfully last few months to a client's server without any issues. The output should look exactly the same across the 3 browsers - IE, Chrome and Firefox.

In the latest build, the output is behaving erratically in Chrome. When I hover my mouse over the text, it changes colour (yellow-green). See attachment.

Planifi_Chrome_Issue.PNG

The current Chrome update is: 47.0.2526.73 m
I have reported the issue to Google Chrome.

The output looks fine across IE and Firefox.

Planifi_Firefox.PNG

Planifi_IE.PNG

Has anyone else come across this before?

[kkelleher]

This is a complete shot in the dark, but I wonder if it may be related to a Chrome bug discussed in another thread. I'm not sure where it might be picking up the color (which is bed28a), but the text does seem to also be bold in Chrome. Perhaps adding the @namespace rule to your CSS as described in the other thread might fix it for you.

For what it's worth, I'm not able to reproduce this in my own projects (HTML5 in Chrome 47.0.2526.73 m), which makes no sense to me.

EDIT: I did just see this in MadCaps's own help for Flare, same green color and everything.

Thanks,

Kristen

[asmith]

Ogaleswapnil, I am running into the same problem. My text changes from whatever color it normally is to blue (the same color as one of my heading options) and increases in size. It does this only in Google Chrome version 47.0.2526.73.

All of my other browsers (Firefox, Safari, and IE10) are up to date with their latest versions, and I am not seeing the problem in any of those.

It sounds like the other thread that Kristen linked to has also reported it to MadCap and Google and has indicated that both are working on workarounds/resolving the issue.

I'm glad I'm not the only one with this problem. At first, I thought I had somehow majorly messed up something in Flare by accident.

Thanks,
Allison

[MattyQ]

We also encountered this issue with Chrome 47. In our case, it appears to be an issue with the way Chrome 47 is parsing the MadCap styles:

chromeWindow.png

In our case, the issue was that the MadCap|dropDownHotSpot:hover style was getting applied to all elements in the topic. I worked around this by converting MadCap|dropDownHotSpot:hover to [class*=dropDownHotspot]. "Hotspot" is critical -- it looks like the dropdown hotspots use a different case in the class name (dropDownHotspot, versus dropDownHotSpot, which is the class in every other reference).

I imagine if you're running into similar issues with MadCap|<...>:hover issues, you could work around it in a similar method, by switching them to the [class*=<...>]:hover selector.

For visual reference, the original CSS:

originalCss.png

And the CSS as I've modified it:

[nielsf]

Thanks for the solution. Adding

Code: Select all

@namespace MadCap url('localhost');

to the style sheet did it for me. However, my Flare editing space, which uses the same style sheet, is now broken because Flare barfs on the @namespace command.
And I can't include it in an imported style sheet because that won't work.
Oh well, just another item of post-processing to remember, or another tool to write...
-Niels

[MattyQ]

To note, after updating to Chrome 47.0.2526.80 m (64-bit), the fix Rob stated (viewtopic.php?f=13&t=26711&start=25#p117901) does now work correctly for us.

[ogaleswapnil]

Thanks all. The following solution has worked for now, but I will be keeping an eye on Madcap's and Google's resolution to the issue.

Thanks for the solution. Adding
CODE: SELECT ALL
@namespace MadCap url('localhost');