Slim invisible line covering button in Chrome, but not Firefox


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 or here is my codepen.

Any insight would be appreciated.

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

1 Like

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

I am not a CSS expert. I basically used the developer tools to figure out it had something to do with either the body css or the .bg-wrapper. I noticed when I moused over the invisible space, that the body element was selected, so I figured since it had a higher layer ( 0 ) than the .bg-wrapper layer (-99), it might have something to do with the z-index. I made it the same as the body and then it worked correctly. If I studied all of your layers, it may make become clearer, but for now I am glad you have a working solution.

1 Like

Well thanks again, I appreciate it!