youtubeのprogress-barにボタンを追記したい

Question

youtubeのprogress-barに赤いボタンを追加する
chrome-extensionを作ってますが、syncが合わない問題で困ってます。

   var scurubberDiv = $(`
      <div class="ytp-scrubber-container" value=${
        i.time[0]
      } style="transform: translateX(${resultPx}px);">
        <div class="ytp-scrubber-button ytp-swatch-background-color" style="height: 13px;">
          <div class="ytp-scrubber-pull-indicator">
          </div>
        </div>
      </div>
      `);

赤いボタンは上記コードのtranslateXに値を入れることで移動できますが、

以下の式だと、ズレが発生します。

一秒あたりのpx数　= ( progress-barのwidth / youtubeの再生時間 )
一秒あたりのpx数 * ボタンを追記したい秒(2:06なら126)

例えば、https://www.youtube.com/watch?v=ptnYBctoexk&list=PLrEVdgA7zLrSRvi1pRl7nioGLWd14xQPn&index=25&t=0s

のビデオだと

youtubeの再生時間が4:44で
自分の環境でprogress-barのwidthは803pxなので

一秒あたりのpx数は　(803 / 284) = 2.82746478873
だと思います。

これで

2:06のprogress-barにボタンを追記するとしたら

2.82746478873 * 126　= 356.26056338pxをtranslateXに入れると思いますが、
手動でクリックしてソースを確認すると
translateX(358.59px)となってました。

手動でもう一回クリックすると

translateX(357px);が出てたりもします。

youtubeの仕様によるし自分の算数能力の問題だとは思いますが、解決方法がわからず、こちらに質問します。
問題解決のため良いアプローチがあれば、些細なことでも良いですのでご教示いただけますか？