Why is safari's element width considerably differently as reported from chrome and firefox, when using a custom font-family?

Question

These are the results of Javascript's offsetWidth:

Chrome WITHOUT custom font-family: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36

element offsetWidth = 393

Firefox WITHOUT custom font-family: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:54.0) Gecko/20100101 Firefox/54.0

element offsetWidth = 393

Safari WITHOUT custom font-family: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/603.3.8 (KHTML, like Gecko) Version/10.1.2 Safari/603.3.8

element offsetWidth = 394

Now, when uncommenting the custom font-family for -tag in styles.css:

Chrome WITH custom font-family: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36

element offsetWidth = 416

Firefox WITH custom font-family: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:54.0) Gecko/20100101 Firefox/54.0

element offsetWidth = 416

Safari WITH custom font-family: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/603.3.8 (KHTML, like Gecko) Version/10.1.2 Safari/603.3.8

element offsetWidth = 1047

What? element offsetWidth = 1047? Why? What's wrong? What's wrong with the code, or is it a bug in safari?

I think, this (wrong?) behavior of safari will have an impact for the following css-animation, where the percent x-position in @keyframes will depend on the elements width.

By the way, Safari breaks the animated text with custom font-family arbitrary!!!

I hope, someone has an explanation for me, thanks in advance :-)

Here are the code-files

index.html

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

<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">

<title>Element Width</title>

<!-- loading from google fonts -->
<!-- font-family: 'Open Sans', sans-serif; -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<!-- loading with google's webfont loader -->
<!--
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
    WebFont.load({
        google: {
            families: ['Open+Sans']
        }
    });
</script>
-->

<!-- font-face -->
<!-- <link rel="stylesheet" href="font/open_sans/styles.css"> -->

<!-- default styles -->
<link rel="stylesheet" href="css/styles.css">

<!-- animation styles -->
<!-- <link rel="stylesheet" href="css/animate.css"> -->

</head>
<body>

    <div class="wrapper">

        <span class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>

        <p class="info"></p>

    </div>

    <script>

        function setElementInfo() {
            var element = document.querySelector('.text');
            var info    = document.querySelector('.info');
            var message = navigator.userAgent + '<br>' + 'element offsetWidth = ' + element.offsetWidth;
            info.innerHTML = message;
        }

        // setElementInfo();
        window.addEventListener('load', setElementInfo);

    </script>

</body>
</html>

css/styles.css

*,
*:before,
*:after {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

body {

    /* system font */
    font-family: Arial;

    /* custom font */
    /*font-family: "Open Sans", sans-serif;*/
}

.wrapper {
    background-color: #5ad;
}

.text {
    display: inline-block;
    color: #fff;
    background-color: #da5;
}

css/animate.css

.wrapper {
    width: 960px;
    margin: 30px auto;
    overflow: hidden;
}

.text {

    padding-left: 100%;
    white-space: nowrap;

    -webkit-animation: animate 7s linear 0ms infinite;
            animation: animate 7s linear 0ms infinite;
}

.text:hover {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}

@-webkit-keyframes animate {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
                transform: translate3d(-100%, 0, 0);
    }
}

@keyframes animate {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
                transform: translate3d(-100%, 0, 0);
    }
}

Stephen Gheysens Stephen Gheysens · Accepted Answer · 2017-08-09T14:06:26

I don't think that there should be anything wrong with how this animation works; because the translate values are %'s, everything will be relative.

transform: translate3d(-100%, 0, 0);

Check out this codepen in both Chrome and Safari, the result looks the same: https://codepen.io/segheysens/pen/gxWXaZ

Why is safari's element width considerably differently as reported from chrome and firefox, when using a custom font-family?

1 Answers