如何解决DataTable固定首表头与首列后的表头偏移问题？

我实现了一个水平和垂直滚动时固定首表头与首列的DataTable，原本运行正常，但当首列中存在内容宽于表头的单元格时，将表格滚动至右下再返回左上后，表头出现偏移（见配图）。以下是复现该问题的R代码：

library(shiny)
library(DT)
library(tidyverse)

(df <- diamonds[1:100,])
df <- mutate(df, carat = as.character(carat))
df[1, 1] <- "qwertyuiopqwertyuiop"
df <- bind_cols(df[1:100, ], df[1:100, ])

runApp(
  list(ui = fluidPage(
    selectInput("here", "Here to reproduce bug", letters),
    dataTableOutput("mytable")
    ),
       server = function(input, output, session){
         output$mytable <- renderDataTable(
           DT::datatable(df,
                         rownames=FALSE,
                         extensions = c("FixedColumns",
                                        "FixedHeader"), 
                         options =
                           list(dom = 't', 
                                scrollX = TRUE, 
                                paging=FALSE,
                                fixedHeader=TRUE,
                                fixedColumns =
                                  list(leftColumns = 1,
                                       rightColumns = 0))))}))

编辑：
尝试用纯JavaScript代码复现该问题，但长列的换行表现不同，未能复现（见配图），怀疑这是CSS问题，以下是纯JS代码：

index.html #

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

<head>
  <meta charset="utf-8">
  <title>datatables bug</title>
  <link rel="stylesheet" href="style.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>


  <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.css" />

  <script src="https://cdn.datatables.net/fixedheader/3.4.0/js/dataTables.fixedHeader.min.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.4.0/css/fixedHeader.bootstrap.css" />

  <script src="https://cdn.datatables.net/fixedcolumns/4.3.0/js/dataTables.fixedColumns.min.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/4.3.0/css/fixedColumns.bootstrap.css" />
  

  <script src="www/script.js"></script>
</head>

<body>
  <h1>Scroll the table to the right and the bottom and go back</h1>
  <p>If the table is not wide or long enough to scroll just zoom in...</p>

  <hr>

</html>

www/script.js #

function tableCreate() {
    const table_size = 20;
    const body = document.body,
        tbl = document.createElement('table'),
        hd = document.createElement('thead');


    const r = hd.insertRow();
    for (let i = 0; i < table_size; i++) {
        const h = document.createElement('th');
        h.appendChild(document.createTextNode(`Col ${i}`));
        r.appendChild(h)
    }

    tbl.appendChild(hd);
    const bd = document.createElement('tbody');
    tbl.appendChild(bd);

    for (let i = 1; i < table_size; i++) {
        const tr = bd.insertRow();
        for (let j = 0; j < table_size; j++) {
            const td = tr.insertCell();
            if (i == 0) {
                td.appendChild(document.createTextNode(`Col ${j}`));
            } else {
                td.appendChild(document.createTextNode(`this is a long string !!! Yes it is...`));
            }
        }
    }


    body.appendChild(tbl);

    $("table").attr("id", "myTable")
    $("table").attr("class", "display")
}



$(document).ready(function () {
    tableCreate();

    $('#myTable').DataTable({

        fixedHeader: true,
         fixedColumns: {
             left: 1
         },
        paging: false,
        searching: false
    });
});

内容的提问来源于stack exchange，提问作者pietrodito