How to fix setInterval issue when the clamped minimum is slower than the one second for inactive tab?

Question

I was searching an issue about a delay in my Pomodoro clock (FreeCodeCamp project) that I discovered when I noticed my test session of one minute should have been done by now. I checked back and it was delayed. I used my phone timer and ran my Pomodoro clock again off tab, did other things on other tabs like watched a youtube vid, etc, and after checking back, the clock was behind by 25 seconds. I learned about the setTimeout/setInterval issue regarding inactive tabs. However, my setInterval is set to 1000ms anyway, so according to MDN,

firing no more often than once per second (1000 ms) in inactive tabs

shouldn't my setInterval run the same? Yet it's slower than the 1000ms. Why and how do I solve this?

I provided a bare bones example of my project, removed styling, but the issue still remains. I'm wondering if there's just "too much" going on, maybe the structure of my code is slowing it down? I don't know...

https://jsfiddle.net/gzygd3kn/1/

$(document).ready(function () {

  $("#start-button").on("click", function () {
    var field1 = document.getElementById("input-box");
    var field2 = document.getElementById("input-box2");
    if (field1.value == null || field2.value == null 
        || field1.value == "" || field2.value == "") {
      alert("Please enter session length.");
    } else {
      initialTimer();
      $(this).attr("disabled","true");
    }
  });


  function initialTimer () {
    var inputInitialTime = $(".input-initial-time").val();
    initializing(inputInitialTime, true);
    $(".break-text").css("border-bottom", "none");
    $(".activity-text").css("border-bottom", "solid 2px #31708f");
  }
  function breakTime () {
    var inputBreakTime = $(".input-break-time").val();
    initializing(inputBreakTime, false);
    $(".activity-text").css("border-bottom", "none");
    $(".break-text").css("border-bottom", "solid 2px #31708f");
  }

  function initializing (input, running) {
    var minutesToSeconds = input*60;
    var workTime = running;
    updateClock();

    var startTimer = setInterval(updateClock,1000);
        function updateClock () {
          var t = countDownMinutes(minutesToSeconds);
          if (t.total <= 0 && workTime == true) {
            clearInterval(startTimer);
            breakTime();
          } else if (t.total <= 0 && workTime == false) {
            clearInterval(startTimer);
            initialTimer();
          }
          document.getElementById("count-down").innerHTML = 
            (t.hours < 10 ? "0" : "") + t.hours + ":" 
            + (t.minutes < 10 ? "0" : "") + t.minutes + ":" 
            + (t.seconds < 10 ? "0" : "") + t.seconds;
          minutesToSeconds--;
        }
    $("#stop-button").on("click", function () {
      clearInterval(startTimer);
      $("#start-button").removeAttr("disabled");
    });    
  } // End of initializing()

  function countDownMinutes(secondsLeft) {
    var total = secondsLeft;
    var hours = Math.floor(secondsLeft / 3600); 
    var minutes = Math.floor(secondsLeft % 3600 / 60 );
    var seconds = Math.floor(secondsLeft % 60);

    return {
      'total': total,
      'hours': hours,
      'minutes': minutes,
      'seconds': seconds
    };
  } // End of countDownMinutes

});