TimelineMax with repeated tweens and Safari lag on rendering

[stefano93]

Hello, I'm writing here after weeks trying to understand why the problem that I'm going to explain happens. I can not give you a codepen url because I'm unable to reproduce the bug consistently, so I will link directly the url of the site that has it. The problem appears only on Safari on Mac (it's worse on retina displays) and seems to be caused by the rotate animation of a SVG with TimelineMax. Removing the tweens from the timeline fix it. As you can see from the images attached to my post, there is a fixed header that has a transparent background when the scroll position of the page is 0 and a semi-transparent color when the scroll is greater than 0. At the top of the page there is a simple SVG with three circles that should rotate at different speeds. When you scroll, a class is applied to the header and the background color is changed. However, the changes are not immediatly visible, instead you see a intermediate step with the header glitched between one state and the other. Waiting a bit or changing tab and then coming back you can see that the header fixes itself. The code for the animation of the SVG is the following:

$(document).ready(function() {
    var $orbitNear = $('#orbit-near'),
        $orbitFar = $('#orbit-far'),
        $aurora = $('#aurora');

    var timeline = new TimelineMax({ paused: true });

    TweenLite.set([$orbitNear, $orbitFar, $aurora], { transformOrigin: '50% 50%' });

    timeline
        .to($orbitNear, 10, {
            repeat: -1,
            rotation: 360,
            ease: Linear.easeNone
        }, 0)
        .to($orbitFar, 15, {
            repeat: -1,
            rotation: 360,
            ease: Linear.easeNone
        }, 0)
        .to($aurora, 20, {
            repeat: -1,
            rotation: -360,
            ease: Linear.easeNone
        }, 0);

    timeline.play();
});

I honestly don't think I'm doing something wrong, I even cached the jQuery selectors and pre-set the transform origin. If I comment the lines of the tweens, but I let the animation to start (without anything to do) I don't see any problem with the header.

 

The SVG is the following:

<svg id="svg-planet" viewBox="0 0 965 925">
    <g id="aurora" transform="translate(-1292.1717,-688.48999)">
        <path style="fill:#20fdc3" d="m 1770.454,1235.116 -0.028,-18.345 0.472,-10e-4 0.457,-0 0.457,-0 0.458,-0 0.457,-0.01 0.455,-0.01 0.455,-0.01 0.456,-0.01 0.454,-0.013 0.455,-0.013 0.132,-0.01 0.611,18.335 -0.162,0.01 -0.513,0.015 -0.513,0.014 -0.513,0.012 -0.514,0.011 -0.515,0.01 -0.514,0.01 -0.514,0 -0.515,0.01 -0.516,0 -0.502,10e-4 z m -0.873,-0 -0.173,0 -0.515,-0.01 -0.513,-0 -0.515,-0.01 -0.515,-0.01 -0.514,-0.011 -0.513,-0.012 -0.513,-0.014 -0.513,-0.015 -0.512,-0.018 -0.493,-0.018 0.668,-18.332 0.465,0.017 0.454,0.015 0.454,0.013 0.455,0.013 0.455,0.01 0.456,0.01 0.455,0.01 0.456,0.01 0.458,0 0.457,0 0.143,10e-4 -0.087,18.344 z m 11.449,-0.343 -1.194,-18.306 0.14,-0.01 0.451,-0.031 0.449,-0.032 0.448,-0.034 0.449,-0.034 0.449,-0.037 0.448,-0.037 0.446,-0.039 0.448,-0.041 0.446,-0.042 0.447,-0.043 0.048,-0.01 1.822,18.255 -0.075,0.01 -0.504,0.049 -0.503,0.047 -0.505,0.046 -0.506,0.044 -0.505,0.042 -0.506,0.041 -0.506,0.039 -0.508,0.038 -0.508,0.036 -0.506,0.035 -0.165,0.011 z m -22.048,-0.06 -0.311,-0.022 -0.508,-0.038 -0.506,-0.039 -0.505,-0.041 -0.505,-0.042 -0.507,-0.044 -0.504,-0.046 -0.504,-0.047 -0.504,-0.049 -0.503,-0.05 -0.414,-0.043 1.884,-18.248 0.383,0.04 0.446,0.044 0.446,0.043 0.447,0.042 0.447,0.041 0.447,0.039 0.896,0.074 0.898,0.068 0.28,0.02 -1.303,18.298 z m 32.6,-0.983 -2.399,-18.187 0.153,-0.02 0.441,-0.06 0.441,-0.061 0.44,-0.062 0.439,-0.064 0.441,-0.065 0.438,-0.066 0.438,-0.068 0.439,-0.069 0.436,-0.07 0.438,-0.072 0.088,-0.015 3.026,18.094 -0.115,0.019 -0.494,0.081 -0.495,0.08 -0.495,0.078 -0.496,0.076 -0.496,0.075 -0.495,0.074 -0.497,0.072 -0.498,0.07 -0.497,0.069 -0.498,0.067 -0.183,0.024 z m -43.15,-0.117 -0.312,-0.043 -0.497,-0.07 -0.498,-0.072 -0.495,-0.074 -0.496,-0.075 -0.496,-0.076 -0.495,-0.078 -0.495,-0.08 -0.493,-0.081 -0.493,-0.082 -0.456,-0.078 3.085,-18.084 0.426,0.073 0.437,0.073 0.437,0.072 0.437,0.07 0.438,0.069 0.438,0.068 0.438,0.066 0.441,0.065 0.439,0.064 0.44,0.062 0.285,0.04 -2.515,18.171 z m 53.608,-1.622 -3.589,-17.991 0.053,-0.01 0.43,-0.088 0.431,-0.089 0.431,-0.09 0.43,-0.091 0.429,-0.093 0.429,-0.094 0.427,-0.095 0.429,-0.097 0.428,-0.098 0.428,-0.1 0.23,-0.054 4.208,17.856 -0.258,0.061 -0.482,0.112 -0.483,0.11 -0.483,0.11 -0.485,0.108 -0.485,0.106 -0.486,0.105 -0.487,0.103 -0.485,0.102 -0.488,0.101 -0.489,0.099 -0.083,0.017 z m -64.058,-0.175 -0.201,-0.042 -0.486,-0.102 -0.486,-0.103 -0.486,-0.105 -0.486,-0.106 -0.484,-0.108 -0.484,-0.11 -0.482,-0.11 -0.482,-0.112 -0.484,-0.114 -0.482,-0.115 -0.142,-0.035 4.32,-17.829 0.116,0.028 0.426,0.102 0.425,0.1 0.428,0.1 0.428,0.098 0.429,0.097 0.428,0.095 0.428,0.094 0.43,0.093 0.429,0.091 0.432,0.09 0.174,0.036 -3.708,17.967 z m 74.404,-2.266 -4.819,-17.701 0.312,-0.085 0.421,-0.116 0.418,-0.116 0.419,-0.119 0.42,-0.12 0.418,-0.121 0.418,-0.122 0.417,-0.123 0.417,-0.125 0.415,-0.125 0.416,-0.128 0.011,-0 5.419,17.526 -0.036,0.011 -0.469,0.144 -0.472,0.143 -0.471,0.141 -0.471,0.139 -0.473,0.138 -0.473,0.137 -0.472,0.135 -0.474,0.134 -0.476,0.133 -0.476,0.131 -0.339,0.092 z m -84.733,-0.231 -0.45,-0.125 -0.474,-0.134 -0.472,-0.135 -0.473,-0.137 -0.473,-0.138 -0.47,-0.139 -0.472,-0.141 -0.472,-0.143 -0.469,-0.144 -0.469,-0.145 -0.374,-0.116 5.475,-17.509 0.347,0.108 0.832,0.256 0.414,0.125 0.417,0.125 0.418,0.123 0.417,0.123 0.418,0.12 0.42,0.12 0.419,0.119 0.42,0.117 -4.929,17.67 z m 94.86,-2.886 -5.962,-17.349 0.041,-0.014 0.41,-0.142 0.407,-0.143 0.408,-0.145 0.408,-0.146 0.406,-0.146 0.406,-0.148 0.405,-0.149 0.405,-0.15 0.405,-0.152 0.403,-0.153 0.302,-0.115 6.547,17.137 -0.33,0.126 -0.457,0.173 -0.456,0.171 -0.458,0.17 -0.459,0.169 -0.459,0.167 -0.46,0.166 -0.46,0.164 -0.46,0.163 -0.463,0.163 -0.462,0.16 -0.067,0.023 z m -104.968,-0.286 -0.169,-0.06 -0.461,-0.163 -0.459,-0.164 -0.461,-0.166 -0.459,-0.167 -0.458,-0.169 -0.458,-0.17 -0.456,-0.171 -0.458,-0.173 -0.456,-0.174 -0.454,-0.175 -0.232,-0.091 6.65,-17.097 0.205,0.08 0.403,0.155 0.404,0.154 0.402,0.153 0.405,0.152 0.405,0.15 0.405,0.149 0.407,0.148 0.405,0.146 0.408,0.146 0.408,0.145 0.141,0.049 -6.067,17.313 z m 114.884,-3.509 -7.119,-16.907 0.142,-0.06 0.396,-0.169 0.396,-0.169 0.394,-0.17 0.394,-0.172 0.394,-0.173 0.392,-0.174 0.392,-0.175 0.391,-0.176 0.391,-0.178 0.391,-0.178 0.217,-0.1 7.687,16.656 -0.244,0.113 -0.441,0.202 -0.442,0.201 -0.443,0.199 -0.443,0.198 -0.445,0.197 -0.444,0.195 -0.445,0.194 -0.447,0.193 -0.447,0.191 -0.447,0.19 -0.17,0.072 z m -124.779,-0.341 -0.262,-0.112 -0.447,-0.193 -0.445,-0.194 -0.445,-0.195 -0.445,-0.197 -0.442,-0.198 -0.443,-0.199 -0.442,-0.201 -0.441,-0.202 -0.441,-0.203 -0.439,-0.204 -0.154,-0.073 7.787,-16.61 0.128,0.06 0.389,0.181 0.39,0.18 0.78,0.356 0.392,0.176 0.393,0.176 0.392,0.173 0.393,0.173 0.395,0.172 0.393,0.17 0.235,0.1 -7.221,16.864 z m 134.416,-4.107 -8.237,-16.391 0.186,-0.094 0.382,-0.194 0.382,-0.194 0.381,-0.196 0.379,-0.196 0.379,-0.198 0.378,-0.199 0.378,-0.201 0.378,-0.201 0.375,-0.202 0.377,-0.204 0.183,-0.099 8.779,16.107 -0.206,0.113 -0.424,0.229 -0.426,0.229 -0.426,0.227 -0.426,0.226 -0.428,0.225 -0.429,0.224 -0.43,0.223 -0.429,0.221 -0.431,0.219 -0.432,0.219 -0.213,0.107 z m -144.029,-0.393 -0.298,-0.152 -0.43,-0.221 -0.43,-0.223 -0.429,-0.224 -0.427,-0.225 -0.426,-0.225 -0.427,-0.228 -0.426,-0.229 -0.424,-0.229 -0.424,-0.232 -0.423,-0.232 -0.122,-0.067 8.876,-16.055 0.1,0.055 0.375,0.206 0.374,0.204 0.377,0.204 0.375,0.202 0.377,0.201 0.379,0.201 0.379,0.199 0.379,0.198 0.379,0.196 0.381,0.196 0.272,0.139 -8.337,16.341 z m 153.345,-4.685 -9.313,-15.806 0.19,-0.112 0.368,-0.218 0.366,-0.218 0.365,-0.22 0.364,-0.22 0.364,-0.222 0.364,-0.224 0.361,-0.223 0.362,-0.225 0.362,-0.226 0.359,-0.227 0.181,-0.115 9.832,15.488 -0.204,0.129 -0.408,0.257 -0.407,0.255 -0.409,0.255 -0.41,0.253 -0.409,0.251 -0.411,0.251 -0.413,0.25 -0.413,0.248 -0.414,0.247 -0.413,0.246 -0.214,0.126 z m -162.631,-0.443 -0.294,-0.176 -0.413,-0.249 -0.412,-0.249 -0.411,-0.25 -0.41,-0.252 -0.41,-0.253 -0.409,-0.255 -0.407,-0.255 -0.408,-0.257 -0.406,-0.258 -0.404,-0.258 -0.126,-0.081 9.922,-15.43 0.104,0.067 0.359,0.229 0.36,0.229 0.36,0.227 0.361,0.226 0.362,0.225 0.362,0.223 0.363,0.223 0.365,0.223 0.364,0.221 0.365,0.219 0.267,0.16 -9.404,15.751 z m 171.585,-5.241 -10.338,-15.154 0.163,-0.112 0.351,-0.24 0.348,-0.241 0.35,-0.244 0.348,-0.243 0.347,-0.245 0.348,-0.246 0.346,-0.247 0.345,-0.248 0.345,-0.249 0.343,-0.25 0.201,-0.146 10.834,14.804 -0.225,0.164 -0.388,0.282 -0.389,0.281 -0.39,0.281 -0.391,0.278 -0.391,0.277 -0.393,0.277 -0.393,0.276 -0.394,0.273 -0.396,0.274 -0.396,0.272 -0.185,0.126 z m -180.511,-0.493 -0.258,-0.179 -0.393,-0.273 -0.394,-0.276 -0.393,-0.277 -0.391,-0.277 -0.391,-0.278 -0.39,-0.281 -0.389,-0.281 -0.388,-0.282 -0.388,-0.284 -0.385,-0.283 -0.149,-0.111 10.916,-14.743 0.13,0.096 0.344,0.253 0.342,0.25 0.344,0.25 0.344,0.249 0.345,0.248 0.346,0.247 0.348,0.246 0.347,0.245 0.348,0.243 0.35,0.244 0.237,0.163 -10.432,15.091 z m 189.067,-5.77 -11.315,-14.44 0.119,-0.092 0.333,-0.263 0.333,-0.264 0.331,-0.265 0.331,-0.266 0.331,-0.266 0.328,-0.268 0.33,-0.269 0.328,-0.27 0.327,-0.27 0.325,-0.271 0.233,-0.195 11.784,14.059 -0.256,0.214 -0.368,0.307 -0.369,0.306 -0.37,0.304 -0.37,0.303 -0.373,0.303 -0.373,0.301 -0.373,0.3 -0.375,0.299 -0.376,0.298 -0.376,0.297 -0.139,0.108 z m -197.587,-0.538 -0.207,-0.165 -0.375,-0.299 -0.374,-0.3 -0.373,-0.301 -0.372,-0.303 -0.37,-0.303 -0.37,-0.304 -0.369,-0.306 -0.369,-0.307 -0.368,-0.308 -0.365,-0.308 -0.186,-0.157 11.865,-13.992 0.165,0.14 0.326,0.274 0.324,0.273 0.326,0.271 0.327,0.27 0.328,0.27 0.329,0.269 0.329,0.268 0.33,0.266 0.331,0.266 0.331,0.265 0.187,0.148 -11.4,14.373 z m 205.708,-6.274 -12.238,-13.667 0.066,-0.059 0.315,-0.284 0.315,-0.284 0.313,-0.286 0.312,-0.286 0.313,-0.289 0.31,-0.288 0.31,-0.289 0.309,-0.291 0.308,-0.29 0.307,-0.293 0.269,-0.256 12.678,13.259 -0.287,0.274 -0.347,0.33 -0.348,0.329 -0.349,0.328 -0.35,0.327 -0.352,0.326 -0.351,0.324 -0.353,0.323 -0.354,0.323 -0.355,0.322 -0.355,0.32 -0.086,0.077 z m -213.792,-0.583 -0.15,-0.136 -0.354,-0.323 -0.353,-0.323 -0.351,-0.324 -0.351,-0.326 -0.35,-0.327 -0.349,-0.328 -0.349,-0.329 -0.347,-0.33 -0.345,-0.33 -0.345,-0.332 -0.224,-0.217 12.759,-13.181 0.202,0.196 0.306,0.293 0.307,0.294 0.307,0.293 0.308,0.29 0.309,0.291 0.31,0.289 0.311,0.288 0.312,0.289 0.626,0.572 0.13,0.117 -12.319,13.594 z m 221.446,-6.751 -13.108,-12.835 0.014,-0.013 0.296,-0.304 0.295,-0.305 0.294,-0.306 0.293,-0.307 0.293,-0.307 0.29,-0.308 0.29,-0.308 0.29,-0.311 0.289,-0.312 0.288,-0.311 0.285,-0.311 -0.01,0.01 13.561,12.355 -0.011,0.012 -0.325,0.354 -0.325,0.353 -0.325,0.35 -0.326,0.349 -0.329,0.349 -0.329,0.349 -0.33,0.347 -0.331,0.346 -0.331,0.345 -0.333,0.344 -0.334,0.343 -0.032,0.032 z m -229.06,-0.624 -0.092,-0.095 -0.332,-0.345 -0.331,-0.346 -0.33,-0.347 -0.329,-0.349 -0.328,-0.349 -0.326,-0.349 -0.325,-0.35 -0.325,-0.353 -0.325,-0.353 -0.322,-0.354 -0.255,-0.281 13.594,-12.319 0.237,0.262 0.286,0.313 0.286,0.312 0.287,0.311 0.289,0.312 0.29,0.311 0.29,0.308 0.291,0.308 0.292,0.307 0.293,0.307 0.294,0.306 0.075,0.076 -13.184,12.757 z m 236.23,-7.218 -13.955,-11.908 0.262,-0.306 0.274,-0.324 0.274,-0.324 0.272,-0.326 0.272,-0.326 0.27,-0.326 0.27,-0.328 0.269,-0.33 0.268,-0.328 0.266,-0.331 0.266,-0.331 0.032,-0.039 14.34,11.441 -0.05,0.063 -0.3,0.373 -0.301,0.373 -0.303,0.372 -0.303,0.371 -0.304,0.37 -0.306,0.369 -0.307,0.368 -0.307,0.367 -0.309,0.367 -0.31,0.365 -0.28,0.328 z m -243.341,-0.643 -0.043,-0.05 -0.308,-0.366 -0.308,-0.368 -0.307,-0.368 -0.306,-0.369 -0.304,-0.37 -0.303,-0.371 -0.302,-0.372 -0.301,-0.373 -0.3,-0.373 -0.3,-0.375 -0.274,-0.347 14.372,-11.4 0.259,0.326 0.264,0.331 0.266,0.331 0.267,0.331 0.267,0.328 0.269,0.33 0.27,0.328 0.271,0.327 0.271,0.325 0.272,0.325 0.274,0.325 0.026,0.031 -13.992,11.864 z m 249.962,-7.637 -14.708,-10.964 0.207,-0.278 0.253,-0.341 0.253,-0.343 0.25,-0.343 0.25,-0.343 0.25,-0.346 0.247,-0.344 0.247,-0.346 0.246,-0.347 0.245,-0.348 0.243,-0.348 0.059,-0.084 15.06,10.476 -0.073,0.105 -0.276,0.393 -0.277,0.393 -0.277,0.391 -0.278,0.391 -0.281,0.391 -0.281,0.388 -0.282,0.388 -0.284,0.388 -0.284,0.386 -0.285,0.385 -0.224,0.3 z m -256.555,-0.699 -0.274,-0.372 -0.284,-0.388 -0.282,-0.388 -0.28,-0.388 -0.281,-0.391 -0.279,-0.391 -0.277,-0.391 -0.277,-0.393 -0.275,-0.393 -0.275,-0.395 -0.273,-0.395 -0.021,-0.031 15.123,-10.385 0.01,0.011 0.241,0.349 0.243,0.349 0.488,0.696 0.247,0.347 0.247,0.346 0.247,0.344 0.249,0.346 0.5,0.686 0.259,0.351 -14.773,10.876 z m 262.614,-8.001 -15.397,-9.973 0.167,-0.257 0.23,-0.358 0.229,-0.359 0.229,-0.36 0.227,-0.359 0.225,-0.361 0.225,-0.362 0.225,-0.363 0.223,-0.364 0.222,-0.363 0.22,-0.364 0.066,-0.109 15.722,9.452 -0.081,0.134 -0.25,0.414 -0.251,0.411 -0.251,0.41 -0.253,0.409 -0.254,0.408 -0.256,0.408 -0.257,0.408 -0.258,0.406 -0.258,0.405 -0.261,0.405 -0.183,0.282 z m -268.627,-0.733 -0.229,-0.359 -0.258,-0.406 -0.257,-0.408 -0.256,-0.408 -0.254,-0.408 -0.252,-0.409 -0.252,-0.41 -0.251,-0.411 -0.25,-0.413 -0.248,-0.413 -0.247,-0.414 -0.033,-0.055 15.779,-9.358 0.018,0.031 0.218,0.365 0.22,0.366 0.22,0.364 0.222,0.363 0.223,0.364 0.225,0.363 0.225,0.362 0.226,0.361 0.227,0.359 0.228,0.36 0.215,0.336 -15.459,9.878 z m 274.1,-8.355 -16.027,-8.927 0.145,-0.259 0.206,-0.374 0.206,-0.374 0.205,-0.376 0.203,-0.375 0.202,-0.376 0.201,-0.378 0.201,-0.378 0.198,-0.377 0.198,-0.38 0.197,-0.38 0.057,-0.11 16.315,8.388 -0.07,0.135 -0.222,0.429 -0.223,0.428 -0.226,0.429 -0.226,0.426 -0.227,0.426 -0.229,0.427 -0.23,0.424 -0.23,0.423 -0.233,0.424 -0.233,0.422 -0.158,0.283 z m -279.522,-0.762 -0.201,-0.367 -0.231,-0.423 -0.23,-0.424 -0.229,-0.427 -0.227,-0.426 -0.226,-0.426 -0.225,-0.429 -0.224,-0.428 -0.222,-0.429 -0.221,-0.43 -0.22,-0.432 -0.026,-0.05 16.367,-8.286 0.013,0.024 0.194,0.381 0.195,0.38 0.197,0.38 0.198,0.38 0.199,0.377 0.2,0.378 0.202,0.378 0.201,0.376 0.204,0.375 0.205,0.376 0.187,0.342 -16.08,8.83 z m 284.379,-8.673 -16.587,-7.835 0.138,-0.294 0.182,-0.387 0.181,-0.39 0.18,-0.389 0.178,-0.39 0.178,-0.392 0.176,-0.39 0.175,-0.393 0.174,-0.393 0.173,-0.393 0.171,-0.393 0.03,-0.069 16.842,7.272 -0.042,0.097 -0.194,0.446 -0.196,0.445 -0.196,0.444 -0.198,0.442 -0.199,0.444 -0.201,0.441 -0.202,0.442 -0.203,0.44 -0.204,0.44 -0.207,0.439 -0.149,0.316 z m -289.185,-0.789 -0.189,-0.406 -0.203,-0.44 -0.202,-0.442 -0.2,-0.441 -0.199,-0.443 -0.199,-0.443 -0.197,-0.445 -0.195,-0.444 -0.194,-0.445 -0.193,-0.447 -0.182,-0.425 16.864,-7.222 0.17,0.398 0.342,0.788 0.173,0.394 0.174,0.392 0.175,0.392 0.176,0.391 0.178,0.392 0.178,0.39 0.18,0.389 0.179,0.384 -16.636,7.733 z m 293.404,-8.954 -17.078,-6.698 0.147,-0.374 0.156,-0.403 0.155,-0.401 0.154,-0.404 0.153,-0.404 0.151,-0.403 0.151,-0.406 0.149,-0.405 0.148,-0.406 0.147,-0.407 0.145,-0.407 17.275,6.174 -0.155,0.435 -0.166,0.459 -0.167,0.459 -0.169,0.459 -0.17,0.457 -0.171,0.458 -0.173,0.456 -0.174,0.455 -0.176,0.457 -0.176,0.453 -0.156,0.396 z m -297.557,-0.782 -0.027,-0.067 -0.175,-0.456 -0.175,-0.456 -0.173,-0.457 -0.171,-0.456 -0.17,-0.458 -0.168,-0.459 -0.168,-0.459 -0.166,-0.46 -0.164,-0.46 -0.163,-0.46 -0.118,-0.336 17.312,-6.068 0.109,0.308 0.144,0.408 0.146,0.408 0.146,0.406 0.148,0.406 0.149,0.405 0.151,0.405 0.152,0.405 0.152,0.403 0.154,0.403 0.155,0.402 0.015,0.039 -17.095,6.654 z m 301.107,-9.195 -17.475,-5.584 0.024,-0.073 0.13,-0.413 0.13,-0.414 0.128,-0.416 0.127,-0.415 0.126,-0.416 0.125,-0.417 0.123,-0.417 0.122,-0.418 0.121,-0.418 0.12,-0.418 0.071,-0.253 17.655,4.983 -0.079,0.281 -0.135,0.474 -0.137,0.472 -0.138,0.473 -0.14,0.472 -0.14,0.47 -0.143,0.471 -0.144,0.47 -0.145,0.469 -0.146,0.469 -0.148,0.468 -0.032,0.1 z m -304.614,-0.832 -0.064,-0.205 -0.145,-0.469 -0.144,-0.469 -0.142,-0.472 -0.141,-0.471 -0.14,-0.471 -0.138,-0.473 -0.137,-0.472 -0.135,-0.473 -0.134,-0.474 -0.132,-0.476 -0.048,-0.172 17.686,-4.874 0.04,0.144 0.117,0.419 0.118,0.419 0.12,0.42 0.121,0.418 0.122,0.418 0.124,0.418 0.124,0.416 0.125,0.415 0.256,0.832 0.056,0.177 -17.509,5.475 z m 307.498,-9.395 -17.816,-4.376 0.07,-0.283 0.103,-0.425 0.102,-0.425 0.101,-0.427 0.099,-0.427 0.098,-0.428 0.096,-0.427 0.096,-0.43 0.094,-0.428 0.093,-0.429 0.091,-0.431 0,-0.01 17.955,3.762 -0.01,0.037 -0.103,0.485 -0.105,0.486 -0.107,0.485 -0.107,0.484 -0.11,0.484 -0.11,0.483 -0.113,0.483 -0.113,0.482 -0.115,0.482 -0.117,0.482 -0.076,0.308 z m -310.326,-0.849 -0.101,-0.423 -0.114,-0.482 -0.112,-0.483 -0.111,-0.483 -0.109,-0.483 -0.108,-0.485 -0.107,-0.486 -0.105,-0.485 -0.103,-0.485 -0.102,-0.488 -0.078,-0.376 17.968,-3.704 0.071,0.347 0.09,0.429 0.092,0.431 0.093,0.43 0.093,0.427 0.096,0.428 0.097,0.429 0.098,0.428 0.099,0.427 0.101,0.427 0.095,0.398 -17.843,4.262 z m 312.515,-9.523 -18.065,-3.197 0.023,-0.128 0.076,-0.435 0.074,-0.436 0.073,-0.436 0.072,-0.438 0.07,-0.437 0.069,-0.437 0.068,-0.439 0.066,-0.439 0.065,-0.44 0.064,-0.439 0.017,-0.119 18.164,2.568 -0.021,0.151 -0.072,0.497 -0.074,0.496 -0.075,0.495 -0.076,0.495 -0.078,0.496 -0.08,0.495 -0.081,0.494 -0.082,0.493 -0.084,0.493 -0.086,0.492 -0.027,0.155 z m -314.647,-0.86 -0.047,-0.28 -0.083,-0.493 -0.081,-0.494 -0.08,-0.495 -0.078,-0.494 -0.076,-0.497 -0.075,-0.496 -0.073,-0.495 -0.072,-0.497 -0.071,-0.498 -0.069,-0.497 -0,-0.019 18.18,-2.457 -0,-0.01 0.061,0.441 0.062,0.44 0.064,0.439 0.065,0.441 0.066,0.438 0.068,0.438 0.069,0.438 0.07,0.437 0.072,0.438 0.073,0.436 0.043,0.252 -18.084,3.084 z m 316.14,-9.637 -18.235,-1.999 0.01,-0.071 0.048,-0.444 0.046,-0.446 0.044,-0.447 0.043,-0.445 0.042,-0.445 0.041,-0.449 0.039,-0.447 0.037,-0.447 0.037,-0.449 0.034,-0.449 0.01,-0.123 18.294,1.365 -0.012,0.151 -0.039,0.506 -0.041,0.506 -0.042,0.506 -0.044,0.505 -0.046,0.503 -0.047,0.505 -0.049,0.505 -0.05,0.502 -0.052,0.503 -0.054,0.504 -0.011,0.1 z m -317.576,-0.871 -0.024,-0.236 -0.051,-0.502 -0.049,-0.505 -0.047,-0.504 -0.045,-0.504 -0.045,-0.506 -0.042,-0.505 -0.041,-0.506 -0.039,-0.506 -0.038,-0.508 -0.035,-0.488 18.299,-1.302 0.032,0.457 0.034,0.448 0.035,0.449 0.036,0.449 0.038,0.448 0.039,0.446 0.04,0.448 0.042,0.446 0.043,0.445 0.045,0.447 0.021,0.21 -18.248,1.879 z m 318.373,-9.709 -18.329,-0.78 0.01,-0.138 0.018,-0.455 0.017,-0.452 0.015,-0.455 0.013,-0.455 0.013,-0.454 0.01,-0.456 0.01,-0.455 0.01,-0.456 0.01,-0.456 0,-0.458 0,0.01 18.345,0.148 -10e-4,0.019 -0.01,0.514 -0.01,0.515 -0.01,0.514 -0.01,0.514 -0.012,0.513 -0.014,0.513 -0.016,0.513 -0.017,0.511 -0.018,0.513 -0.02,0.511 -0.01,0.164 z m -319.112,-0.871 -0.011,-0.316 -0.017,-0.512 -0.016,-0.513 -0.013,-0.513 -0.013,-0.514 -0.01,-0.513 -0.01,-0.514 -0.01,-0.515 -0.01,-0.514 -0,-0.515 -0,-0.35 18.345,-0.087 10e-4,0.32 0,0.457 0.01,0.458 0.01,0.456 0.01,0.456 0.01,0.456 0.011,0.455 0.012,0.454 0.014,0.455 0.015,0.454 0.01,0.288 -18.333,0.667 z m 300.872,-9.297 -0.01,-0.326 -0.013,-0.455 -0.013,-0.454 -0.015,-0.455 -0.017,-0.453 -0.018,-0.454 -0.019,-0.453 -0.021,-0.452 -0.022,-0.453 -0.024,-0.452 -0.017,-0.301 18.317,-1.015 0.019,0.33 0.026,0.51 0.025,0.51 0.024,0.51 0.022,0.512 0.02,0.51 0.018,0.513 0.017,0.511 0.016,0.513 0.014,0.513 0.01,0.352 -18.34,0.439 z m -282.578,-0.781 0,-0.01 -18.338,-0.495 0,-0.022 0.016,-0.513 0.017,-0.512 0.018,-0.511 0.021,-0.511 0.022,-0.513 0.023,-0.509 0.025,-0.51 0.027,-0.51 0.028,-0.51 0.03,-0.509 0.011,-0.184 18.31,1.133 -0.01,0.155 -0.027,0.45 -0.025,0.451 -0.023,0.452 -0.023,0.453 -0.021,0.453 -0.019,0.452 -0.018,0.453 -0.016,0.455 -0.015,0.454 -0.014,0.454 z m 282.054,-8.596 -0.038,-0.421 -0.042,-0.446 -0.043,-0.445 -0.044,-0.447 -0.046,-0.446 -0.047,-0.443 -0.049,-0.446 -0.05,-0.444 -0.052,-0.443 -0.052,-0.443 -0.032,-0.258 18.209,-2.23 0.035,0.289 0.06,0.501 0.058,0.501 0.056,0.502 0.055,0.5 0.054,0.504 0.052,0.503 0.05,0.502 0.049,0.505 0.047,0.505 0.041,0.45 -18.271,1.65 z m -281.478,-0.784 -18.265,-1.707 0.01,-0.114 0.049,-0.505 0.051,-0.502 0.051,-0.503 0.054,-0.502 0.055,-0.502 0.056,-0.503 0.058,-0.5 0.06,-0.501 0.061,-0.501 0.063,-0.498 0.02,-0.155 18.195,2.341 -0.016,0.126 -0.056,0.443 -0.054,0.443 -0.053,0.443 -0.051,0.444 -0.05,0.443 -0.049,0.445 -0.047,0.444 -0.046,0.446 -0.045,0.447 -0.043,0.445 -0.01,0.083 z m 280.336,-8.537 -0.061,-0.388 -0.07,-0.437 -0.072,-0.437 -0.073,-0.437 -0.074,-0.435 -0.076,-0.436 -0.077,-0.437 -0.078,-0.433 -0.08,-0.435 -0.081,-0.433 -0.063,-0.333 18.022,-3.427 0.069,0.364 0.091,0.49 0.091,0.491 0.088,0.492 0.087,0.491 0.086,0.492 0.084,0.494 0.082,0.493 0.081,0.493 0.08,0.495 0.066,0.417 -18.122,2.856 z m -279.142,-0.777 -18.112,-2.913 0.012,-0.078 0.081,-0.493 0.083,-0.493 0.084,-0.493 0.085,-0.493 0.087,-0.492 0.089,-0.49 0.09,-0.492 0.092,-0.491 0.092,-0.489 0.095,-0.489 0.047,-0.242 18.001,3.54 -0.042,0.21 -0.083,0.433 -0.083,0.435 -0.081,0.432 -0.079,0.434 -0.079,0.436 -0.077,0.435 -0.075,0.435 -0.075,0.436 -0.073,0.437 -0.072,0.437 -0.01,0.048 z m 277.382,-8.45 -0.056,-0.249 -0.098,-0.428 -0.099,-0.426 -0.101,-0.427 -0.102,-0.426 -0.103,-0.424 -0.105,-0.427 -0.105,-0.424 -0.107,-0.424 -0.108,-0.423 -0.11,-0.423 -0.014,-0.052 17.745,-4.654 0.021,0.079 0.124,0.479 0.122,0.479 0.121,0.479 0.12,0.481 0.118,0.479 0.117,0.481 0.115,0.483 0.113,0.481 0.113,0.484 0.11,0.482 0.063,0.276 -17.894,4.044 z m -275.577,-0.74 -17.868,-4.154 0.091,-0.392 0.114,-0.481 0.114,-0.481 0.118,-0.483 0.118,-0.48 0.119,-0.48 0.121,-0.479 0.122,-0.479 0.124,-0.479 0.125,-0.477 0.111,-0.418 17.731,4.709 -0.104,0.391 -0.111,0.422 -0.109,0.423 -0.109,0.423 -0.107,0.424 -0.105,0.425 -0.105,0.426 -0.103,0.423 -0.101,0.427 -0.101,0.427 -0.085,0.363 z m 273.202,-8.354 -0.01,-0.024 -0.125,-0.418 -0.126,-0.415 -0.127,-0.416 -0.128,-0.415 -0.13,-0.414 -0.13,-0.414 -0.132,-0.413 -0.134,-0.413 -0.134,-0.413 -0.136,-0.411 -0.101,-0.303 17.403,-5.802 0.111,0.332 0.154,0.466 0.152,0.466 0.15,0.466 0.15,0.468 0.148,0.468 0.146,0.469 0.145,0.469 0.144,0.47 0.143,0.471 0.14,0.47 0.016,0.052 -17.592,5.204 z m -270.778,-0.726 -17.558,-5.314 0.047,-0.158 0.144,-0.469 0.145,-0.469 0.147,-0.469 0.148,-0.468 0.149,-0.468 0.151,-0.466 0.152,-0.466 0.154,-0.466 0.154,-0.465 0.157,-0.464 0.077,-0.228 17.368,5.907 -0.068,0.201 -0.139,0.411 -0.137,0.411 -0.135,0.411 -0.135,0.413 -0.133,0.413 -0.132,0.413 -0.131,0.414 -0.13,0.414 -0.128,0.415 -0.128,0.417 -0.039,0.13 z m 267.808,-8.166 -0.064,-0.171 -0.151,-0.403 -0.153,-0.403 -0.154,-0.404 -0.155,-0.402 -0.156,-0.402 -0.158,-0.401 -0.158,-0.401 -0.16,-0.401 -0.161,-0.399 -0.162,-0.398 -0.075,-0.181 16.971,-6.967 0.085,0.209 0.184,0.451 0.182,0.452 0.181,0.452 0.179,0.453 0.179,0.454 0.176,0.454 0.176,0.456 0.174,0.455 0.173,0.457 0.171,0.458 0.073,0.196 -17.197,6.386 z m -264.789,-0.711 -17.158,-6.492 0.112,-0.294 0.174,-0.456 0.175,-0.455 0.177,-0.454 0.178,-0.454 0.179,-0.453 0.181,-0.452 0.182,-0.452 0.184,-0.451 0.185,-0.45 0.185,-0.449 0.048,-0.115 16.929,7.069 -0.037,0.087 -0.165,0.398 -0.163,0.399 -0.162,0.398 -0.161,0.399 -0.16,0.401 -0.159,0.401 -0.157,0.401 -0.157,0.402 -0.155,0.403 -0.154,0.403 -0.101,0.266 z m 261.229,-7.967 -0.111,-0.246 -0.178,-0.391 -0.178,-0.391 -0.18,-0.389 -0.181,-0.389 -0.182,-0.389 -0.183,-0.387 -0.184,-0.387 -0.186,-0.387 -0.187,-0.386 -0.187,-0.384 -0.058,-0.118 16.464,-8.092 0.071,0.145 0.213,0.437 0.211,0.436 0.209,0.436 0.209,0.437 0.207,0.439 0.206,0.439 0.204,0.439 0.203,0.441 0.202,0.441 0.201,0.442 0.123,0.274 -16.728,7.53 z m -257.622,-0.692 -16.682,-7.632 0.166,-0.363 0.203,-0.441 0.205,-0.439 0.206,-0.439 0.207,-0.439 0.208,-0.437 0.209,-0.436 0.211,-0.436 0.213,-0.436 0.213,-0.435 0.215,-0.434 0.029,-0.057 16.415,8.19 -0.016,0.032 -0.19,0.383 -0.188,0.384 -0.188,0.385 -0.187,0.386 -0.185,0.387 -0.185,0.387 -0.183,0.387 -0.182,0.389 -0.181,0.389 -0.179,0.389 -0.154,0.336 z m 253.489,-7.733 -0.145,-0.271 -0.202,-0.376 -0.203,-0.376 -0.205,-0.375 -0.206,-0.375 -0.206,-0.374 -0.208,-0.372 -0.209,-0.373 -0.21,-0.371 -0.211,-0.371 -0.212,-0.371 -0.059,-0.101 15.891,-9.166 0.071,0.123 0.239,0.417 0.239,0.42 0.474,0.84 0.235,0.423 0.233,0.422 0.232,0.423 0.232,0.424 0.229,0.424 0.229,0.426 0.159,0.297 -16.187,8.633 z m -249.311,-0.668 -16.133,-8.734 0.205,-0.378 0.231,-0.424 0.232,-0.423 0.234,-0.422 0.235,-0.423 0.236,-0.42 0.237,-0.42 0.238,-0.419 0.24,-0.419 0.241,-0.418 0.242,-0.416 0.025,-0.042 15.835,9.263 -0.012,0.019 -0.214,0.37 -0.214,0.37 -0.212,0.369 -0.21,0.371 -0.211,0.372 -0.209,0.373 -0.207,0.372 -0.207,0.374 -0.206,0.375 -0.204,0.375 -0.192,0.355 z m 244.625,-7.466 -0.162,-0.26 -0.225,-0.36 -0.227,-0.36 -0.229,-0.36 -0.229,-0.359 -0.23,-0.357 -0.232,-0.358 -0.232,-0.357 -0.234,-0.356 -0.234,-0.355 -0.235,-0.354 -0.075,-0.111 15.247,-10.202 0.089,0.134 0.267,0.401 0.265,0.401 0.264,0.402 0.262,0.403 0.261,0.403 0.261,0.405 0.259,0.405 0.257,0.406 0.257,0.408 0.256,0.408 0.176,0.283 -15.577,9.69 z m -239.895,-0.644 -15.517,-9.786 0.226,-0.359 0.258,-0.406 0.259,-0.405 0.26,-0.404 0.261,-0.404 0.263,-0.403 0.263,-0.402 0.266,-0.401 0.266,-0.401 0.267,-0.398 0.268,-0.399 0.04,-0.059 15.185,10.293 -0.023,0.035 -0.238,0.353 -0.237,0.354 -0.236,0.355 -0.234,0.354 -0.233,0.356 -0.233,0.357 -0.231,0.357 -0.23,0.358 -0.23,0.359 -0.228,0.36 -0.212,0.336 z m 234.677,-7.165 -0.159,-0.221 -0.249,-0.345 -0.25,-0.343 -0.25,-0.342 -0.252,-0.343 -0.254,-0.342 -0.254,-0.341 -0.254,-0.339 -0.256,-0.339 -0.257,-0.338 -0.258,-0.337 -0.108,-0.141 14.542,-11.184 0.125,0.163 0.291,0.38 0.29,0.382 0.289,0.383 0.288,0.385 0.287,0.384 0.285,0.385 0.284,0.386 0.284,0.388 0.282,0.388 0.281,0.389 0.175,0.244 -14.902,10.698 z m -229.416,-0.618 -14.839,-10.785 0.229,-0.316 0.284,-0.388 0.284,-0.386 0.285,-0.385 0.287,-0.384 0.288,-0.385 0.29,-0.383 0.29,-0.382 0.291,-0.38 0.292,-0.38 0.294,-0.38 0.072,-0.093 14.472,11.274 -0.053,0.069 -0.26,0.334 -0.259,0.338 -0.258,0.337 -0.257,0.338 -0.256,0.339 -0.254,0.339 -0.254,0.341 -0.253,0.342 -0.253,0.343 -0.25,0.342 -0.212,0.291 z m 223.69,-6.831 -0.139,-0.168 -0.269,-0.326 -0.273,-0.327 -0.272,-0.326 -0.274,-0.324 -0.274,-0.323 -0.275,-0.323 -0.277,-0.322 -0.277,-0.321 -0.278,-0.32 -0.279,-0.319 -0.157,-0.179 13.776,-12.114 0.175,0.198 0.315,0.361 0.314,0.362 0.313,0.362 0.312,0.363 0.311,0.365 0.31,0.366 0.309,0.366 0.307,0.367 0.307,0.368 0.306,0.37 0.156,0.19 -14.167,11.654 z m -217.925,-0.586 -14.097,-11.739 0.214,-0.257 0.308,-0.367 0.308,-0.366 0.31,-0.366 0.311,-0.365 0.312,-0.363 0.313,-0.362 0.314,-0.362 0.316,-0.361 0.316,-0.359 0.317,-0.359 0.118,-0.132 13.704,12.196 -0.1,0.112 -0.281,0.318 -0.28,0.319 -0.279,0.319 -0.278,0.32 -0.278,0.321 -0.277,0.322 -0.275,0.323 -0.274,0.323 -0.274,0.325 -0.272,0.325 -0.196,0.235 z m 211.718,-6.469 -0.104,-0.111 -0.291,-0.308 -0.292,-0.307 -0.293,-0.306 -0.294,-0.307 -0.295,-0.304 -0.296,-0.304 -0.297,-0.303 -0.297,-0.302 -0.298,-0.301 -0.3,-0.3 -0.216,-0.216 12.952,-12.992 0.236,0.235 0.338,0.339 0.337,0.341 0.336,0.341 0.335,0.341 0.334,0.344 0.333,0.344 0.331,0.344 0.331,0.346 0.66,0.696 0.124,0.132 -13.374,12.558 z m -205.474,-0.552 -13.297,-12.639 0.185,-0.195 0.331,-0.346 0.331,-0.344 0.333,-0.344 0.335,-0.344 0.334,-0.341 0.336,-0.341 0.338,-0.341 0.338,-0.339 0.338,-0.337 0.34,-0.337 0.175,-0.172 12.876,13.067 -0.156,0.153 -0.301,0.299 -0.301,0.3 -0.299,0.3 -0.298,0.301 -0.298,0.302 -0.297,0.303 -0.296,0.304 -0.294,0.304 -0.295,0.307 -0.293,0.306 -0.165,0.174 z m 198.817,-6.077 -0.062,-0.058 -0.311,-0.289 -0.312,-0.287 -0.312,-0.287 -0.314,-0.286 -0.314,-0.284 -0.315,-0.284 -0.316,-0.283 -0.317,-0.282 -0.317,-0.281 -0.319,-0.28 -0.282,-0.246 12.074,-13.812 0.302,0.264 0.359,0.316 0.359,0.317 0.358,0.319 0.356,0.319 0.356,0.32 0.355,0.322 0.354,0.323 0.353,0.323 0.352,0.325 0.351,0.326 0.081,0.075 -12.519,13.41 z m -192.124,-0.517 -12.438,-13.485 0.146,-0.134 0.352,-0.323 0.354,-0.323 0.355,-0.322 0.356,-0.32 0.356,-0.319 0.358,-0.319 0.359,-0.317 0.36,-0.316 0.36,-0.316 0.362,-0.314 0.237,-0.205 11.99,13.885 -0.216,0.187 -0.32,0.278 -0.319,0.279 -0.319,0.28 -0.318,0.281 -0.316,0.282 -0.317,0.283 -0.315,0.284 -0.314,0.284 -0.314,0.286 -0.312,0.287 -0.127,0.117 z m 185.042,-5.659 -0.015,-0.013 -0.329,-0.267 -0.331,-0.267 -0.331,-0.266 -0.331,-0.264 -0.332,-0.264 -0.334,-0.263 -0.335,-0.263 -0.335,-0.26 -0.335,-0.26 -0.337,-0.259 -0.345,-0.263 11.141,-14.575 0.365,0.279 0.38,0.293 0.381,0.294 0.378,0.295 0.377,0.295 0.376,0.296 0.376,0.298 0.375,0.3 0.373,0.3 0.373,0.301 0.372,0.302 0.036,0.03 -11.613,14.201 z m -177.927,-0.479 -11.528,-14.271 0.105,-0.084 0.374,-0.3 0.375,-0.3 0.376,-0.298 0.376,-0.296 0.376,-0.295 0.379,-0.295 0.38,-0.294 0.38,-0.293 0.381,-0.291 0.381,-0.289 0.297,-0.224 11.054,14.64 -0.276,0.208 -0.338,0.257 -0.338,0.258 -0.337,0.259 -0.335,0.26 -0.334,0.26 -0.335,0.263 -0.334,0.263 -0.333,0.264 -0.331,0.264 -0.331,0.266 -0.084,0.068 z m 170.477,-5.198 -0.343,-0.243 -0.348,-0.245 -0.348,-0.244 -0.349,-0.243 -0.35,-0.242 -0.35,-0.24 -0.351,-0.24 -0.353,-0.239 -0.353,-0.238 -0.354,-0.236 -0.354,-0.235 -0.02,-0.014 10.11,-15.308 0.042,0.029 0.401,0.266 0.399,0.267 0.399,0.268 0.794,0.54 0.396,0.272 0.396,0.274 0.394,0.274 0.393,0.275 0.393,0.277 0.364,0.258 -10.608,14.967 z m -162.973,-0.456 -10.566,-14.997 0.07,-0.049 0.394,-0.276 0.393,-0.273 0.395,-0.273 0.397,-0.273 0.397,-0.27 0.398,-0.27 0.398,-0.268 0.4,-0.268 0.4,-0.265 0.4,-0.265 0.347,-0.227 10.063,15.338 -0.322,0.212 -0.356,0.235 -0.355,0.235 -0.352,0.236 -0.354,0.238 -0.352,0.239 -0.352,0.24 -0.349,0.24 -0.35,0.242 -0.35,0.243 -0.348,0.244 -0.046,0.032 z m 155.142,-4.73 -0.332,-0.205 -0.364,-0.221 -0.364,-0.221 -0.366,-0.22 -0.366,-0.218 -0.366,-0.218 -0.368,-0.216 -0.369,-0.216 -0.368,-0.214 -0.37,-0.214 -0.37,-0.212 -0.035,-0.019 9.071,-15.946 0.06,0.034 0.419,0.24 0.418,0.241 0.417,0.243 0.415,0.243 0.415,0.244 0.415,0.246 0.413,0.247 0.413,0.249 0.412,0.249 0.412,0.251 0.355,0.218 -9.597,15.635 z m -147.284,-0.411 -9.549,-15.664 0.047,-0.029 0.412,-0.249 0.413,-0.249 0.414,-0.247 0.414,-0.246 0.415,-0.244 0.416,-0.243 0.417,-0.243 0.418,-0.241 0.418,-0.24 0.419,-0.238 0.374,-0.212 9.023,15.973 -0.349,0.197 -0.371,0.211 -0.37,0.213 -0.369,0.213 -0.369,0.214 -0.369,0.216 -0.367,0.216 -0.367,0.218 -0.366,0.218 -0.365,0.22 -0.365,0.221 -0.024,0.015 z m 139.131,-4.242 -0.347,-0.182 -0.379,-0.198 -0.38,-0.197 -0.38,-0.195 -0.381,-0.195 -0.383,-0.193 -0.382,-0.193 -0.383,-0.191 -0.384,-0.19 -0.384,-0.188 -0.385,-0.188 -0.019,-0.009 7.987,-16.515 0.045,0.022 0.435,0.212 0.435,0.213 0.434,0.215 0.433,0.216 0.432,0.217 0.432,0.219 0.431,0.22 0.43,0.221 0.429,0.222 0.429,0.224 0.37,0.195 -8.535,16.238 z m -130.951,-0.366 -8.488,-16.263 0.053,-0.028 0.429,-0.222 0.431,-0.221 0.431,-0.22 0.431,-0.219 0.433,-0.217 0.433,-0.216 0.433,-0.215 0.435,-0.213 0.435,-0.212 0.436,-0.211 0.368,-0.177 7.939,16.539 -0.343,0.164 -0.386,0.187 -0.386,0.188 -0.384,0.188 -0.384,0.19 -0.383,0.192 -0.382,0.192 -0.382,0.193 -0.381,0.195 -0.381,0.195 -0.379,0.197 -0.028,0.014 z m 122.51,-3.731 -0.398,-0.177 -0.394,-0.173 -0.394,-0.171 -0.395,-0.171 -0.395,-0.169 -0.395,-0.168 -0.397,-0.167 -0.397,-0.166 -0.398,-0.165 -0.398,-0.163 -0.383,-0.156 6.912,-16.993 0.409,0.167 0.451,0.185 0.45,0.186 0.448,0.187 0.448,0.189 0.448,0.19 0.894,0.384 0.445,0.194 0.444,0.195 0.423,0.188 -7.428,16.774 z m -114.046,-0.319 -7.378,-16.796 0.096,-0.042 0.445,-0.194 0.446,-0.192 0.447,-0.192 0.448,-0.19 0.448,-0.189 0.449,-0.187 0.449,-0.186 0.451,-0.185 0.451,-0.184 0.452,-0.182 0.315,-0.126 6.808,17.035 -0.289,0.116 -0.4,0.161 -0.399,0.162 -0.398,0.163 -0.397,0.165 -0.398,0.166 -0.396,0.167 -0.396,0.168 -0.395,0.169 -0.394,0.171 -0.395,0.171 -0.07,0.031 z m 105.327,-3.215 -0.068,-0.025 -0.406,-0.148 -0.406,-0.146 -0.408,-0.146 -0.408,-0.144 -0.408,-0.143 -0.409,-0.142 -0.409,-0.141 -0.41,-0.139 -0.411,-0.139 -0.411,-0.137 -0.275,-0.09 5.746,-17.422 0.303,0.099 0.464,0.155 0.928,0.314 0.463,0.159 0.463,0.161 0.461,0.162 0.461,0.163 0.46,0.164 0.46,0.166 0.459,0.168 0.094,0.034 -6.333,17.217 z m -96.616,-0.259 -6.228,-17.256 0.194,-0.07 0.461,-0.164 0.46,-0.163 0.462,-0.162 0.462,-0.161 0.463,-0.159 0.464,-0.157 0.464,-0.157 0.465,-0.155 0.466,-0.153 0.466,-0.152 0.198,-0.064 5.64,17.456 -0.173,0.056 -0.413,0.135 -0.411,0.135 -0.411,0.137 -0.41,0.139 -0.41,0.139 -0.41,0.141 -0.409,0.142 -0.408,0.143 -0.408,0.144 -0.407,0.146 -0.167,0.06 z m 87.712,-2.672 -0.226,-0.066 -0.418,-0.121 -0.419,-0.12 -0.419,-0.118 -0.419,-0.117 -0.421,-0.116 -0.422,-0.115 -0.42,-0.113 -0.422,-0.112 -0.422,-0.111 -0.423,-0.109 -0.089,-0.023 4.544,-17.773 0.115,0.029 0.478,0.124 0.479,0.125 0.477,0.127 0.477,0.128 0.475,0.13 0.475,0.131 0.475,0.132 0.474,0.134 0.473,0.135 0.473,0.137 0.253,0.074 -5.148,17.608 z m -78.793,-0.211 -5.038,-17.64 0.36,-0.103 0.474,-0.134 0.476,-0.132 0.474,-0.131 0.476,-0.13 0.477,-0.128 0.477,-0.127 0.478,-0.125 0.478,-0.124 0.478,-0.122 0.455,-0.115 4.488,17.788 -0.426,0.107 -0.424,0.109 -0.423,0.109 -0.422,0.111 -0.422,0.112 -0.421,0.113 -0.421,0.115 -0.421,0.116 -0.419,0.117 -0.42,0.118 -0.334,0.096 z m 69.689,-2.125 -0.013,-0.002 -0.429,-0.095 -0.429,-0.092 -0.43,-0.092 -0.431,-0.09 -0.431,-0.089 -0.431,-0.087 -0.432,-0.087 -0.432,-0.085 -0.433,-0.083 -0.434,-0.083 -0.265,-0.049 3.368,-18.033 0.294,0.055 0.489,0.092 0.49,0.095 0.488,0.096 0.488,0.097 0.976,0.2 0.485,0.102 0.487,0.103 0.486,0.105 0.484,0.107 0.042,0.009 -3.987,17.906 z m -60.573,-0.161 -3.875,-17.931 0.16,-0.035 0.486,-0.103 0.486,-0.102 0.487,-0.1 0.488,-0.1 0.488,-0.097 0.489,-0.096 0.489,-0.094 0.489,-0.093 0.491,-0.092 0.492,-0.09 0.171,-0.031 3.253,18.054 -0.143,0.026 -0.434,0.079 -0.433,0.081 -0.434,0.083 -0.433,0.083 -0.432,0.085 -0.432,0.087 -0.431,0.087 -0.43,0.089 -0.432,0.09 -0.429,0.092 -0.131,0.028 z m 51.367,-1.554 -0.353,-0.054 -0.44,-0.065 -0.44,-0.064 -0.44,-0.062 -0.44,-0.061 -0.441,-0.059 -0.442,-0.059 -0.442,-0.056 -0.442,-0.056 -0.443,-0.054 -0.346,-0.041 2.17,-18.217 0.375,0.045 0.499,0.061 0.5,0.063 0.5,0.064 0.498,0.066 0.498,0.067 0.499,0.069 0.497,0.071 0.497,0.072 0.495,0.073 0.382,0.058 -2.741,18.139 z m -42.123,-0.117 -2.685,-18.147 0.043,-0.006 0.497,-0.072 0.497,-0.071 0.498,-0.069 0.499,-0.067 0.498,-0.066 0.499,-0.064 0.5,-0.063 0.5,-0.061 0.501,-0.06 0.5,-0.058 0.24,-0.027 2.057,18.23 -0.212,0.024 -0.444,0.051 -0.443,0.053 -0.444,0.054 -0.442,0.056 -0.441,0.056 -0.443,0.059 -0.44,0.059 -0.44,0.061 -0.441,0.062 -0.44,0.064 -0.014,0.002 z m 32.796,-0.987 -0.343,-0.029 -0.448,-0.036 -0.448,-0.035 -0.449,-0.034 -0.45,-0.032 -0.45,-0.03 -0.45,-0.03 -0.45,-0.027 -0.452,-0.027 -0.451,-0.025 -0.307,-0.016 0.956,-18.32 0.337,0.018 0.51,0.028 0.509,0.03 0.509,0.031 0.508,0.033 0.507,0.035 0.507,0.036 0.507,0.038 0.507,0.039 0.506,0.041 0.372,0.031 -1.537,18.281 z m -23.464,-0.065 -1.479,-18.285 0.036,-0.003 0.507,-0.039 0.507,-0.038 0.507,-0.036 0.508,-0.035 0.508,-0.033 0.509,-0.031 0.508,-0.03 0.51,-0.028 0.509,-0.027 0.511,-0.025 0.189,-0.009 0.841,18.326 -0.159,0.007 -0.453,0.023 -0.452,0.023 -0.451,0.025 -0.451,0.027 -0.45,0.027 -0.451,0.03 -0.45,0.03 -0.449,0.032 -0.449,0.034 -0.449,0.035 -0.01,0 z m 14.088,-0.421 -0.462,-0.008 -0.457,-0.007 -0.457,-0.005 -0.456,-0.004 -0.458,-0.002 -0.458,0 -0.458,0 -0.458,0.002 -0.456,0.004 -0.457,0.005 -0.133,0.002 -0.26,-18.343 0.16,-0.002 0.515,-0.006 0.516,-0.004 0.516,-0.003 1.031,0 0.515,0.003 0.516,0.004 0.515,0.006 0.514,0.007 0.491,0.008 -0.319,18.343 z" />
    </g>
    <g id="planet-earth" transform="translate(-1292.1717,-688.48999)">
        <g transform="translate(1295.93,687.923)">
            <path style="fill:#d4faf0" d="m 422.895,395.192 c -4.298,-4.298 -4.295,-11.27 0,-15.565 l 43.732,-43.732 c 4.298,-4.298 11.271,-4.295 15.565,0 l 43.733,43.732 c 4.298,4.298 4.294,11.271 0,15.565 l -43.733,43.733 c -4.298,4.298 -11.27,4.294 -15.565,0 l -43.732,-43.733 z" />
        </g>
    </g>
    <g transform="translate(-1292.1717,-688.48999)" style="opacity:0.3">
        <path style="fill:none;stroke:#20fdc3;stroke-width:2px;stroke-miterlimit:10" d="m 1770.88,986.901 62.602,25.931 25.93,62.601 -25.93,62.602 -62.602,25.931 -62.602,-25.931 -25.93,-62.602 25.93,-62.601 62.602,-25.931 z" />
    </g>
    <g id="orbit-near">
        <path d="m 478.1683,789.43301 c 199.927,0 362,-162.073 362,-362 0,-199.927 -162.073,-362 -362,-362 -199.927,0 -362,162.073 -362,362 0,199.927 162.073,362 362,362 z" style="fill:none;stroke:rgba(255,255,255,.3);stroke-width:0.5px;stroke-dasharray:9.07, 9.07;" />
        <circle cx="185.39824" cy="213.93701" r="20" style="fill:#2c1b3d;stroke:#ffffff;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round" />
    </g>
    <g id="orbit-far">
        <path d="m 940.1683,467.43301 c 13.531,0 24.5,-10.969 24.5,-24.5 0,-13.531 -10.969,-24.5 -24.5,-24.5 -13.531,0 -24.5,10.969 -24.5,24.5 0,13.531 10.969,24.5 24.5,24.5 z" style="fill:#20fdc3" id="path3428" />
        <path d="m 478.1683,924.43301 c 255.156,0 462,-206.844 462,-462 0,-255.156 -206.844,-462 -462,-462 -255.156,0 -462,206.844 -462,462 0,255.156 206.844,462 462,462 z" style="fill:none;stroke:rgba(255,255,255,.3);stroke-width:0.5px;stroke-dasharray:9.07, 9.07;" />
        <circle cx="17.200005" cy="482.04236" r="14.60608" style="fill:#2c1b3d;stroke:#ffffff;stroke-width:3.00154948px;stroke-linecap:round;stroke-linejoin:round" />
    </g>
</svg>

I would like to post publicy the website address, however it's still in development so I would prefer to give it only in PM. Thank you for your patience.

 

[Carl]

Hi and welcome to the GreenSock forums,

 

A CodePen that sometimes replicates the behavior is 100 times better for us than looking at your live site (or blurry images). There is no way for us to experiment with the code or test our theories. From what you describe it shouldn't take much time to set up a CodePen with a single SVG and 3 tweens. We don't need to see any of your production artwork.

 

Your description doesn't really make it sound like this is something GSAP is doing wrong. One suggestion is to make sure you don't have any CSS transitions fighting with GSAP, it kind of sounds like something like that might be happening. 

 

Even if you spend an hour making the CodePen demo I'm confident it will be time well spent. 

[stefano93]

I managed to create a

See the Pen yegLXe by anon (@anon) on CodePen

, however as I said before this isn't like watching the original page. On my Macbook (2011 with Intel HD Graphics 3000 384MB) I see the header that isn't updated immediatly and instead after the scroll it takes a few seconds to apply the class changes. However the class is correctly added and removed immediatly when the jQuery code fires. You can see the problem even in the scroll to top button: to change the color from red to blue it takes a while, it seems that something is blocking rendering. Removing the code that handles the button seems to fix the header in my case. Removing the tweens from the timeline fixes the problem too. Just to be on the safe side, I sent you a PM with the original page.

[OSUblake]

It probably has something to do with the way you are doing the scroll, or lack thereof. I've never seen anybody do that before. Try using scrollTop.

[stefano93]

Do you mean using scrollTop of jQuery instead of pageYOffset? I already tried that and I have the same problem.

[OSUblake]

No. There is no code for scrolling or clicks. You're just using an anchor tag.

[stefano93]

Oh sorry, I misunderstood what you said. What I meant is that the code that handles the toggling of the classes to the button and header is in the codepen. There is no need for the code that fires when the button is clicked because that is not the problem. The problem is when you scroll down the page and the header that should change padding and color is stuck in a intermediate state between the previous class and the new one for a few seconds

[OSUblake]

Have you tried using GSAP?

See the Pen Bjppxg?editors=001 by osublake (@osublake) on CodePen

[stefano93]

Using GSAP seems to improve things, although sometimes I still see the glitch on the header. I realized that the animated padding of the header could be the issue. With the original code written in CSS and the removal of the padding transition, it seems to work as expected. I'm pretty sure that the animation of the SVG is the cause of all problems, because removing the timeline fixes all the problems one time for all.

[OSUblake]

Instead of padding, you could center the logo and then animate the height of the header.

See the Pen zrNZRJ by osublake (@osublake) on CodePen

 

Or you could do some layering with absolutely positioned elements and animate their y values. But it sounds like the overall issue here has to do with SVG rendering, which can be notoriously slow for complicated graphics. The best way to speed up SVG animations is to not use SVG. I know, not a good answer, but using images or rendering your SVG onto a canvas element can speed things up dramatically.

 

Here's a great an example of SVG to canvas...

http://fabricjs.com/svg-caching/

[stefano93]

Unfortunately animating the height does not work either. I honestly tried every solution, the only thing that seems to work is to divide the SVG in smaller pieces and animate their wrapper div with plain old CSS animations. The thing that I don't understand is why only Safari has problems. Every other browser works like a charm, it's a real shame. The SVG is not so complicated either, it's just 3 path that draw some circles that should rotate. This is a big fail from my point of view (obviously it's not fault of your library)

[OSUblake]

Yeah, it seems like Apple is letting Safari turn into IE8, but your idea about wrapping them in divs should work just fine, and you could still use GSAP.