Blue border around modal area

[franklinmarketing]

I cannot figure out where this blue border around the modal area is coming from. I use this same timed modal element I have saved on other sites, and it is fine and does not do this. But, on this site, ahlc.org, it has this blue border. Appreciate any insight into what is causing it.

[tristup]

Hi @franklinmarketing,

Thanks for reaching out.
I have checked it but didn’t find the blue border to the Modal background as shown in the given screenshot. Can you please check it without logging in? If you still find that, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

NOTE: Please check in different browsers, as it might be any browser extension which is the reason behind the problem.

Thanks

[franklinmarketing]

It is happening logged out as well. This is incognito and all cache cleared.

[ruenel]

Hey @franklinmarketing,

I am another staff checking in. I could not replicate the issue on my browser. This is what I see:

Best Regards.

[franklinmarketing]

Could you pull it up in Chrome? I am able to replicate on another device/network in Chrome. Not happening in Safari.

[ruenel]

Hey @franklinmarketing,

This is what I got in Chrome:

As soon as I inspect the page, the blue lines disappear.

I think this is how the Chrome browsers render the modal indicating it as focused. I tested the site with MS Edge, Brave, Safari, and Opera and I could not replicate the issue.

Best Regards.

[franklinmarketing]

I don’t think so. Here is the same element/modal setup, on a different site, in Chrome, and it is fine. They’re literally on the same server. qvrkids.com

[tristup]

Hi @franklinmarketing,

It seems to be a problem with your machine only, I suggest you consult with a local developer who can inspect and investigate the issue specifically at your machine. I would also suggest you check it on any other computer and different networks and browsers.

Hope it helps.
Thanks

[franklinmarketing]

Nope. Not when @ruenel replicated the issue.

[marc_a]

Hey @franklinmarketing,

I tried to replicate the issue on my end but I couldn’t. I suspect that this has something to do with the OS and browser. Would you mind sharing your OS and browser data so that we can check it properly.

Thank you.

[franklinmarketing]

MacOS & Chrome, both current.

[ruenel]

Hey @franklinmarketing,

I suspect that this is happening on MacOS and Chrome only. My colleagues are using Windows machine and Chrome and they cannot replicate the issue.

Thanks.

[franklinmarketing]

So, to confirm, no resolution? or, is someone looking into why it is happening, as @ruenel and I did replicate it on different MacOS and Chrome setups.

[ruenel]

Hello @franklinmarketing,

I can confirm that I was able to replicate the Blue Border around the modal. One thing to note with your concern is that the one that has no blue border is using Integrity stack while the one having an issue is using the Starter stack. Be advised that Starter and Blank stacks have minimal CSS styling to make them light. Some of the styling on these stacks were default render of the browser. If you want to get rid of the blue border while using the Starter Stack, please add this custom CSS in Cornerstone > Theme Options > Custom Code > CSS:

a:hover, a:active, [tabindex="-1"] {
    outline: 0 !important;
}

Best Regards.

[franklinmarketing]

Got it. Thank you for looking to uncover that difference and thank you for a solution, @ruenel!!!

[ruenel]

You are most welcome, @franklinmarketing.