Skip to content

on webkit Safari, fixed line-height for li::marker leads to ugly first line spacing in multiline items #515

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
acsr opened this issue Mar 26, 2025 · 0 comments

Comments

@acsr
Copy link

acsr commented Mar 26, 2025

In VLT 6.0.0.a15 in regular Volto text blocks with listing ul-list items style the initial line has a different linespacing. Together with missing margin-bottom this looks misleading ugly on Safari both on Desktop and mobile.

  • The line height of the list item marker exceeds the regular line-height of 24px and forces a greater line spacing after the first line.

    li::marker {
    line-height: 32px;
    }

    The issue is created by different interpretation of this snippet in Webkit. It does not show off in Chrome:

  • There are other ul list examples lacking this effect on the https://2025.ploneconf.org/tickets page

Environment

VLT 6.0.0.a15 (guessed on theploneconf.org site )
macOS 15.3.2 and Safari 18.3.1
iOS 18.1.1

Example Screenshots Safari Desktop

https://tagung.plone.de/2025/sponsoring

Image

https://2025.ploneconf.org/call-for-papers

Image

Same on mobile:

Image

@acsr acsr changed the title Styling for ul has fixed line-height for li::marker leading to ugly look of line spacing of first line and multiline li items on Webkit Safari on webkit Safari, fixed line-height for li::marker leads to ugly first line spacing in multiline items Mar 26, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant