Chrome button:hover buggy?

[toad78]

So if you take a look here and hover over the Preschool ‘Learn More’ button and the Teams ‘Learn More’ button in Chrome, you notice that the during hover the text disappears. I have the color on hover set to be ‘#FFF’. In FF and IE, I don’t see any issues. What’s queer is that this hover state does not act up on the Xcel Program ‘Learn More’ button.

Using Chrome’s Developer Tools and checking the :hover state, I’m not seeing any problems. The code is the same. The only difference is the rotation and background colors.

Anyone see why the two other buttons aren’t working?

[RyanReese]

I’m not seeing any sort of buggy behavior on my Chrome. What OS / Chrome version are you on? Have you cleared your cache?

[jeffreylees]

Text disappears on mine, I can verify that - Windows 8.1 Chrome Version 43.0.2357.130 m

I’m headed out the door though so no troubleshooting for me

[ronpat]

I’m guessing it’s a webkit issue.

[RyanReese]

It’s not behaving badly on my Chrome. That’s odd.

[ronpat]

There is something very wrong with that page. The chrome around Firefox and the text in Firebug go black intermittently when that page is open.

[toad78]

I’m using Chrome 43 with Windows 7.

[RyanReese]

To make sure I’m not going crazy, you all are scrolling down to preschool section, and underneith this paragraph

Our Preschool programs are specially designed to meet the needs of children in their formative years. We emphasize fun and fitness through gymnastic-oriented activities.

There is a learn more button. Hovering that - that text disappears…?

[toad78]

That is correct.

[toad78]

If it helps, I’m using the concept of the 3d and rotation buttons here.

[Mittineague]

the problem looks to be in this block

.butn:after { 
  content: "";
  position: absolute; 
  z-index: -1;
}

removing any of those 3 “fixes” the text visibility, but at the expense of losing the “effect”

[ronpat]

Yes, it happens to me with Chrome, too. The text disappears like it is being hidden by an overlay or something.

[toad78]

Great solution, Mittineague. I simply commented out the ‘z-index’ and Chrome seems to be cooperative.

Thank you.

[PaulOB]

It’s not well known but transformed elements create a new stacking context so when you try to force the stacking the :after element can no longer go behind the text of the parent and therefore rubs it out.

Sometimes leaving the stacking index to auto will solve the problem but where you need to force the issue it is not always possible.

Opacity less than 1 has the same behaviour also. Read more about it here.

[toad78]

Thank you, PaulOB for the insight to the article. I’ll make a read of it today.