0

I really am at a loss on this one. I forked this CodePen for a really cool button transition and I'm using it on my site. (Forget who originally made it but they rock).

The crazy thing is that the code works on CodePen in all browsers, and on the site in Chrome and Firefox, but not in Safari. In Safari, when the button is hovered over, the red bubble fill never appears and the text simply turns white (making the button invisible for all intents and purposes).

I've looked at this answer and this answer. Since it seems to be an issue with the parent-child relationship I tried adding suggested code from one of the other answers:

.parent:hover .child{ display:inline-block; }

but this doesn't accomplish anything. I know it's basically impossible to debug since the codepen works fine, but any general thoughts or things I could try would be amazingly helpful. Thanks!

Community
  • 1
  • 1
singmotor
  • 3,930
  • 12
  • 45
  • 79
  • You probably have some collision in your css in your website. Can you provide a link to a working version? And which version of safari? – Dekel Nov 08 '16 at 18:18
  • It works on the codepen, but not on your site. Hence the problem is on your site, and the examples and code you've given us doesn't help one bit. Try reducing the amount of javascript on the site, removing specific elements in the CSS until it works, then you've pinpointed the problem, and you can see what might cause the issue. – junkfoodjunkie Nov 08 '16 at 18:29
  • This is what I was looking for, thanks! It's at the end of my css so it's not that. But when I disable all javascript it works! I'll work backwards from there. – singmotor Nov 08 '16 at 20:51
  • Solved it, eliminating the JS piece by piece showed me that it was a z-index issue. Thank you! – singmotor Nov 08 '16 at 20:59

0 Answers0