Border appearing on pop ups

Hello @silverfox93 – thanks for writing in to us!

I’m afraid to say that you will need to update all the popup.

That said, we can try to implement a global fix by using custom CSS code for that. Could you please set up a test page where we can see the issue from your end and we can take a closer look at it?

Kindly advise and thanks in advance.

Hello @mariatogonon

Can I email you a link to the page in question please as I’d rather not publish it on the support forum?

• This reply was modified 3 years, 4 months ago by silverfox93.

Hello @silverfox93

Yes, you may send us a message at https://wppopupmaker.com/support
Could you also please try the below custom CSS and add it to your Appearance > Customize > Additional CSS

.pum-content.popmake-content:focus-visible, 
.pum-content *:focus, 
.pum-overlay .pum-content?{
	outline: none !important;
}

I hope that helps.

We look forward to hearing from you soon.

Hello @belimperial,

I applied the CSS you supplied, and whilst this appears to have fixed the problem in Chrome, I’m still seeing it in Safari.

I’ve sent you a link via your contact form to a page on my site where you can see this issue for yourself.

Thanks

• This reply was modified 3 years, 4 months ago by silverfox93.

Hi @silverfox93

I’m glad that the CSS worked on your end. On the other hand, it seems one of my colleagues had replied to your ticket. Could you please check the ticket?

Thank you and we look forward to your response.

Just to clarify, the CSS fix only worked for Chrome, it did not work for Safari. I will reply to your colleague via email.

• This reply was modified 3 years, 4 months ago by silverfox93.
• This reply was modified 3 years, 4 months ago by silverfox93.

Is there an update on this that others could use, too?

I’m not comfortable disabling accessibility features in order to fix this — a fix shouldn’t remove important functionality.

A CSS solution would be good — but not if it doesn’t work on all browsers.

Thanks.

Hello @silverfox93

Thank you for your reply. Could you please also add the below CSS for Safari browser.

@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        .pum-overlay .pum-content {
            outline: none !important;
        }
    }
}

Here is the result on Safari https://share.getcloudapp.com/BluKwkl1

Please let us know if that helps or if you need further assistance.

Hi @bws-online

Thank you for joining the thread. Using the CSS will disable the border used in the accessibility feature. It is the same function when using the accessibility in the advanced option. If you want to use CSS and disable the border on all the popups, you may use the below CSS:

.pum-content.popmake-content:focus-visible, 
.pum-content *:focus,
.pum-overlay .pum-content
{
	outline: none !important;
}

@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        .pum-overlay .pum-content {
            outline: none !important;
        }
    }
}

I hope that helps.

Let us know how it goes on your end. If your issue is resolved please take a moment to rate and review the plugin.
If you still need help please message us directly at https://wppopupmaker.com/support/