Site Title Margin Issues on Safari: Capoverso

[sajmes]

Quick summary

There is an extended section to the right of [SITE TITLE] on Safari but not Chrome. When I inspect and disable the -11px right margin on the link itself in Chrome, the appearance then matches Safari. The margin appears to be having no impact on Safari.

I replicated on a test site. Delisted theme.

Advised user to also check out some newer themes of a similar style.

Steps to reproduce

1. Add site title on Capoverso

What you expected to happen

Consistent appearance.

What actually happened

Extra space is present to right of text on Safari.

Extra space is not present on Chrome unless right margin of -11px is deactivated. 8440893-zd-a8c

Browser

Apple Safari

Context

8440893-zd-a8c

Platform (Simple, Atomic, or both?)

No response

Other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

None

Workaround details

No response

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 8440893-zen

[mrfoxtalbot]

✅ I can reproduce it

[mxhassani]

A workaround would be to use this CSS code:

.site-title a {
    display: inline-block;
}

[peterschimke]

@alaczek is this something you can take a look at? Is it worth fixing?

[alaczek]

Thanks for the ping. I looked at it briefly, and if anything it seems to me that the negative right margin was added specifically to fix the extra spacing we're seeing in Safari. Although I do see your point about making it consistent across browsers, given the age of the theme, the minimal impact, and the fact that the theme is delisted, I'm going to close this without fixing.