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

h1 line height different in Safari and Firefox (last version) #593

Closed
jeremenichelli opened this Issue May 4, 2016 · 14 comments

Comments

2 participants
@jeremenichelli
Contributor

jeremenichelli commented May 4, 2016

I've noticed a difference in the line height of <h1> tags between these two and I've created this issue to know if normalize tries to mitigate this kind of differences too.

In case maintainers feel it should I can take care of creating the pull request. Thank you.

@ghost

This comment has been minimized.

ghost commented May 4, 2016

if you zoon out on Firefox to 80% show the same size as in Safari or Chrome?

@jeremenichelli

This comment has been minimized.

Contributor

jeremenichelli commented May 4, 2016

@Karklis nope, in Safari and Chrome the line-height is 50px and in Firefox it's 39.4px and zooming out barely increases it to 39.9px

@ghost

This comment has been minimized.

ghost commented May 4, 2016

Could you provide code and all steps to reproduce this behavior? Are you using just default normalize css without any other css code, or mix something?

@jeremenichelli

This comment has been minimized.

Contributor

jeremenichelli commented May 4, 2016

Create a new html file with this content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Line height diff in h1 tags</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
</head>
<body>
    <h1>line height diff in h1 tags</h1>

    <p>line-height: <span id="lh"></span></p>
    <script>
        document.querySelector('#lh').textContent = window.getComputedStyle(document.querySelector('h1'))[ 'lineHeight' ];
    </script>
</body>
</html>

Save the file and open it, you will be able to see the computed line height on page or open the web inspector in Safari and Firefox and check the resulting computed styles for line-height property.

Results

Firefox: 33px
Safari: 37px

Considering that in both the font-size is 32px, conclusions point that Firefox is assigning only 1.03em of line-height while Safari and Chrome 1.15625em.

@jeremenichelli

This comment has been minimized.

Contributor

jeremenichelli commented May 16, 2016

Hi @Karklis, were you able to test this? Do you prefer another presentation for the test case?

@jonathantneal

This comment has been minimized.

Contributor

jonathantneal commented Jun 1, 2016

I’ve put your test on CodePen, and without normalize.css I see a difference between Chrome and Firefox, between Firefox Mac and Firefox PC, and possibly by a fraction of a pixel in Edge/IE.

http://codepen.io/jonneal/details/RRNpLB/

@jeremenichelli

This comment has been minimized.

Contributor

jeremenichelli commented Jun 1, 2016

So, what do we take as a standard to make them all match? I'll create the PR 😃

@jonathantneal

This comment has been minimized.

Contributor

jonathantneal commented Jun 1, 2016

The CodePen test measures the height of single-line h1 headings using either the initial or sans-serif font. Here are its results when run with a large stack of popular browsers.

Browser Font Line Height
And Chrome initial 136px
And Chrome sans-serif 117px
Mac Chrome initial 115px
Mac Chrome sans-serif 115px
Win Chrome initial 115px
Win Chrome sans-serif 115px
Mac Firefox initial 120px
Mac Firefox sans-serif 101px
Win Firefox initial 118px
Win Firefox sans-serif 118px
iOS Safari initial 117px
iOS Safari sans-serif 117px
Mac Safari initial 115px
Mac Safari sans-serif 115px
Win Edge initial 114.999px
Win Edge sans-serif 114.999px
Win IE11 initial 114.999px
Win IE11 sans-serif 114.999px
Win IE10 initial 114.999px
Win IE10 sans-serif 114.999px
Win IE9 initial 114.999px
Win IE9 sans-serif 114.999px
Mac Opera initial 115px
Mac Opera sans-serif 115px
Win Opera initial 115px
Win Opera sans-serif 115px

When the font size was 100px, the most common line height was 115px. However, results varied from 101px on Mac Firefox to 136px on Android Chrome.

@jeremenichelli

This comment has been minimized.

Contributor

jeremenichelli commented Jun 1, 2016

So it seems like something between 1.5em and 1.15625em should be the normalized value of the line-height. I saw you noticed differences in both h1 and h2 elements, should we applied this fix to all headings?

@jonathantneal

This comment has been minimized.

Contributor

jonathantneal commented Jun 1, 2016

And here are the results for a normalized test where the line height of h1 headings is defined as 1.15.

Browser Font Line Height
And Chrome initial 115px
And Chrome sans-serif 115px
Mac Chrome initial 115px
Mac Chrome sans-serif 115px
Win Chrome initial 115px
Win Chrome sans-serif 115px
Mac Firefox initial 115px
Mac Firefox sans-serif 115px
Win Firefox initial 115px
Win Firefox sans-serif 115px
iOS Safari initial 115px
iOS Safari sans-serif 115px
Mac Safari initial 115px
Mac Safari sans-serif 115px
Win Edge initial 115px
Win Edge sans-serif 115px
Win IE11 initial 115px
Win IE11 sans-serif 115px
Win IE10 initial 115px
Win IE10 sans-serif 115px
Win IE9 initial 115px
Win IE9 sans-serif 115px
Mac Opera initial 115px
Mac Opera sans-serif 115px
Win Opera initial 115px
Win Opera sans-serif 115px

When the font size was 100px, all line height was 115px with no variation.

@jeremenichelli

This comment has been minimized.

Contributor

jeremenichelli commented Jun 1, 2016

OK, so should I make the PR containing fix for all the heading tags to 1.15?

@jonathantneal

This comment has been minimized.

Contributor

jonathantneal commented Jun 1, 2016

Sure, and thank you. This would target h1, h2, h3, h4, h5, h6. Remember, the comment will need to specify which browsers this normalization is targeting, and this would be the most particular list I have yet seen in the project, and you’ll need to manage the line breaks to follow the style guide of the project. If there are issues, I will still take in your PR, but also correct them during the merge.

@jeremenichelli

This comment has been minimized.

Contributor

jeremenichelli commented Jun 1, 2016

Great, will get that done and tag you. Thank you for your help.

@jonathantneal

This comment has been minimized.

Contributor

jonathantneal commented Jun 16, 2016

Thanks :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment