Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Bug: Setting font-size to non-integral rem value breaks alignment in layers #20508

Open
2 tasks done
DaRosenberg opened this issue Dec 22, 2024 · 0 comments
Open
2 tasks done

Bug: Setting font-size to non-integral rem value breaks alignment in layers #20508

DaRosenberg opened this issue Dec 22, 2024 · 0 comments
Labels
bug needs-triage This bug needs to be confirmed

Comments

@DaRosenberg
Copy link

Bug description

Icons stacked in an fa-layers container get misaligned when ambient font-size is set to most non-integral rem values (i.e. a rem value other than 1rem or 2rem etc).

Results vary a bit depending on exactly what we set the font-size to. For some values we get only horizontal misalignment, for others we get vertical misalignment, or both. For some values the icons are even cropped from one or more directions. For some values it breaks in some browsers but not others.

Not being able to vary the text size of icon layers makes them all but unusable.

The issue becomes especially noticeable if one of the layers is configured to rotate, the effect being that it does not rotate around its center but rather wobbles noticably.

Simple repro (CodePen also provided below):

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body
        {
            font-size: 0.875rem;
        }
    </style>
</head>

<body>
    <div class="fa-layers fa-fw">
        <i class="fa-solid fa-circle" style="opacity: 25%"></i>
        <i class="fa-solid fa-circle-small"></i>
    </div>
    <script src="https://kit.fontawesome.com/346ac771ca.js" crossorigin="anonymous"></script>
</body>

</html>

Zoom in on the icon in Safari to see the misalignment (see screenshots below for more example for other browsers).

Reproducible test case

https://codepen.io/DaRosenberg/pen/MYgmZrx

Screenshots

2rem (correct):

image

2.15rem (incorrect - Safari):

image

1.85rem (incorrect - Chrome):

image

Font Awesome version

Latest 6.x

Serving

Kit

Implementation

SVG+JS

Browser and Operating System

  • Safari 18.2 on macOS
  • Chrome 131 on macOS
  • Firefox 133 on macOS

Web bug report checklist

  • I have included a test case because my odds go way up that the team can fix this when I do
  • I have searched for existing issues and to the best of my knowledge this is not a duplicate
@DaRosenberg DaRosenberg added bug needs-triage This bug needs to be confirmed labels Dec 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug needs-triage This bug needs to be confirmed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@DaRosenberg