0

I made an svg animated banner using html, css and GSAP tweenies. Everything's perfectly fine up until a point where a counter starts counting up using simple innerHTML property. All texts in the banner should be Roboto and they are except for this element which gets substituted with default Times New Roman. This happens only in Windows browsers: Edge and IE10, all other vendors browsers render it as it should be.

50% stage of a counter

70% stage of a counter

element transition to the spot where it'll get blended into copy text

You can see on the last image the 70% stands waaaay out

css part: 

    .perc-counter {
>       position: absolute;
>       color: rgb(32, 33, 36);
>       font-family: Roboto-Regular;
>       font-size: 2.5em;
>       top: 185px;
>       text-align: right;
>       right: 138px;
>       opacity: 0;
>     }

.percentage {
  position: absolute;
  color: rgb(32, 33, 36);
  font-family: Roboto-Regular;
  font-size: 2.5em;
  top: 185px;
  text-align: left;
  left: 162px;
  opacity: 0;
}

html part:

<div class="perc-counter" id="perc-counter">0</div>
<div class="percentage" id="percent">%</div>

js part:

var percCounter = document.getElementById("perc-counter");
var percent = document.getElementById("percent");

.to(counter, 1.2, {
          val: newVal,
          roundProps: "val",
          onUpdate: function() {
            percCounter.innerHTML = counter.val
          })

Edit: specified this issue happens only in Windows browsers (initial question was confusing)

Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153
Yah-Yah
  • 1
  • 2
  • What version of IE? Also, don't support IE if possible, try in Edge. – Adam May 17 '18 at 15:45
  • 1
    Dunno, title says Edge, question says IE. – Adam May 17 '18 at 15:56
  • Sorry for confusion! Tested in both Edge and IE - both produce same issue. – Yah-Yah May 17 '18 at 16:01
  • right click on the element, inspect it, and then look at the entire stylesheet cascade, which should explain which rule overwrote, or undid, what you thought was getting applied. Also, as a general rule, don't use `innerHTML` unless you absolutely know what you're doing. Just use `.textContent` if you need to set some text like a counter value. – Mike 'Pomax' Kamermans May 17 '18 at 16:06

1 Answers1

0

Perhaps can you try for IE :

<link href='http://fonts.googleapis.com/css?family=Roboto&subset=latin,greek,greek-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
Gilles-Antoine Nys
  • 1,481
  • 16
  • 21