Slim invisible line covering button in Chrome, but not Firefox

1

Hi!

I’m currently working on my pomodoro timer and I’ve encountered a problem with my buttons. The issue is that there seems to be some sort of invisible line covering part of each of my buttons. Here is a screenshot. When the cursor is hovering on this line, the button hover states don’t activate, nor a does the cursor change or the button work when clicked.

This issue doesn’t occur on Firefox, but it does on Chrome. I’ve looked at the console on both, but I can’t seem to spot a difference. The site is https://blbaylis.github.io/pomodoro-timer or here is my codepen.

Any insight would be appreciated.

2

Try changing z-index of the *.bg-wrapper from -100 to 0

1 Like
3

This worked like a charm, thank you! Any idea why it was only a problem on Chrome though?

5

Well thanks again, I appreciate it!