[Solved] Button in DOM but not visible or clickable (but works on mobile)

I was doing some maintenance of a web app I had built for a client, which involves transactions handled by paypal. Up until now the paypal button was fully functional, and I hadn’t laid a finger on the old code, but suddenly it’s not visible. I did a thorough DOM inspection and saw that it had been rendered to the DOM. Even stranger is that it’s fully visible on mobile. I have no idea what could possibly be causing this, but it’s worrying me because I have this listed on my resume.

Here is the site: http://www.doublerrproductions.com/music and my payments component: https://github.com/codefu-chivy/rrproductions/blob/master/src/components/payment.js

Thanks in advance!

Edit - can anyone verify that they can see the paypal button? I just checked another computer and it works there perfectly, so now I’m starting to feel that it’s just mine.

1 Like

this one?

Yes!! That’s so weird because I’m not seeing it on my computer at all, but when I hover over the element in chrome tools it shows the outline. I suppose it’s just mine.

Did you try disabling ad blocker?

I disabled it, and now the button flashes on the screen for like 3 seconds and disappears. At the bottom of the browser window it says “waiting for paypal.com” and once the page finishes loading, it disappears. I’m not seeing any errors in the console.

Hello,

Seems fine to me…I tried loading your page on Chrome/Firefox/IE and the Paypal button displays perfectly well on all of them. I even tried clicking it and it is clickable so it seems like it’s fully functional :slight_smile:

You might want to check the security settings on your computer. You might have something in there that might’ve blocked it or prevented it from rendering.

Cheers,

Hanna

Thanks for the reply! I think I solved it! It’s truly the strangest thing. I was playing around with the button options locally and I changed the size from small to medium, and it works now. I have no idea why that works but it works haha. That has to be one of the strangest bugs I’ve encountered so far.

1 Like

Did you include a CSS reset? That may fix issues like this in the future.

I’m not quite sure what a CSS reset is. How would I go about doing that?

Different browsers apply different styles by default to certain items. A CSS reset is a minified CSS file at the top that resets these styles to a standard base so you can be assured that every browser works the same. Because you said that it works on others, but your font size doesn’t work on your computer, I thought that possibly you had a default style messing things up. Anyway, you can read more about the idea below.

http://cssreset.com/what-is-a-css-reset/

Thanks for this, I’ll check it out! Sorry for the late reply.