Bug on Safari browser. Clicking on the login button, loads an unknown file

Develop, Build & Integrate CMS Development
1

Safari browser, when clicking on the login button, loads an unknown file.
This is reproducible for a very small number of users.
I cannot reproduce this.
I suspect that these users have an old Mac OS.
Here is my button

OksanaR_0-1767802671563.png

<a href="{{ module.login_url.href }}" class="outline login-button">
 <svg width="12 height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M9.97053 4.46829C9.97053 6.67108 8.20436 8.43733 6.00003 8.43733C3.79646 8.43733 2.02954 6.67108 2.02954 4.46829C2.02954 2.26552 3.79646 0.5 6.00003 0.5C8.20436 0.5 9.97053 2.26552 9.97053 4.46829ZM6.00003 15.5C2.74681 15.5 3.05176e-05 14.9713 3.05176e-05 12.9313C3.05176e-05 10.8904 2.76407 10.3804 6.00003 10.3804C9.25398 10.3804 12 10.9092 12 12.9493C12 14.99 9.23598 15.5 6.00003 15.5Z" fill="#0E9655"/>
 </svg>
 <span>Login</span>
 </a>

I was looking for a solution and found a tip that Safari can catch a click on an svg and load it,
I put pointer-events: none; for svg
but it didn’t work
.login-button svg {
pointer-events: none;
}

OksanaR_0-1767803580362.png

2

Hey @OksanaR - thanks for posting in the Community!
To ensure we get you the best support possible, can you please provide more context regarding the “login” button in question? Specifically, are you referencing the login button to your HubSpot portal? Any additional context you can provide will be helpful to solving for the issue!
Shane, Senior Community Moderator

3

Hi @STierney , thanks for your reply!
This is not the HubSpot portal login button.
It’s a custom login button on our public website, built using HubSpot CMS (custom module).
The button links to our external product login page (e.g. TransferRoom).
For a very small number of users using Safari on older macOS versions, clicking the button does not redirect.
Instead, Safari attempts to download an empty/unknown file.
The issue is not reproducible on modern Safari versions and does not occur in Chrome or Firefox.
The link is configured as a standard URL link field in the module (not File).
The button contains inline SVG markup.

OksanaR_0-1767859631112.png
OksanaR_0-1767859631112.png760×840 72.7 KB

OksanaR_1-1767859653009.png
OksanaR_1-1767859653009.png728×896 62.1 KB

OksanaR_2-1767859801765.jpg
OksanaR_2-1767859801765.jpg3254×838 408 KB

4

Hey @OksanaR - thanks so much for providing this follow-up context!
I’d like to tag in a few Community experts here to see what insight they may have for us on this behavior. @Anton, @jeremymandle, and @alyssamwilie - any thoughts on why users may be experiencing this issue when using Safari on older macOS versions?
Shane, Senior Community Moderator

5

Hey @OksanaR.,

found this old Reddit topic where users experiencing the same issue and provide a fix. But since this isn’t a code fix, it’s something I’d use for something like a knowledge base/tipp.

Since you’re using the URL field in the module, your HubL should look like this:

{{ module.login_link.url.href }}

(this might also solve the problem)

Furthermore - since it’s unlikely that the login page will change frequently, you can use a text field(not rich-text) as URL.

In this case, the HubL (assuming you’d call it “Login link”) would look like this:

{{ module.login_link }}

best,

Anton

6

Hi @Anton , thanks a lot for the tip and for digging up that Reddit thread! I’ll try the fix mentioned in the article first, and then I’ll look into your suggestions regarding the HubL field.
Really appreciate the help!