Sticky not working in chrome

<div class="w-full overflow-auto max-h-[80vh]">
            <table class="table table-compact w-full bg-white">
                <thead class="shadow sticky top-0">
                    <tr
                        use:dndzone={{
                            items: dndItems,
                            flipDurationMs,
                            centreDraggedOnCursor: true,
                            morphDisabled: false,
                            dropTargetClasses: ['bg-primary-400']
                        }}
                        on:consider={handleDndConsiderColumn}
                        on:finalize={handleDndFinalizeColumn}
                        class="variant-filled-primary uppercase tracking-wide bg-primary-500"
                    >
                        {#each dndItems as column (column.id)}
                            <th
                                on:click={() => handler.sort(column.name)}
                                class="cursor-pointer select-none uppercase whitespace-nowrap {getClasses(column)}"
                            >
                                <div class="flex h-full items-center justify-start font-bold text-xs">
                                    {column.name}
                                    {#if $sorted.identifier === column.name}
                                        {#if $sorted.direction === 'asc'}
                                            &darr;
                                        {:else if $sorted.direction === 'desc'}
                                            &uarr;
                                        {/if}
                                    {:else}
                                        &updownarrow;
                                    {/if}
                                </div>
                                {#if column[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
                                    <div class="placeholder" />
                                {/if}
                            </th>
                        {/each}
                    </tr>
                    <tr class="bg-surface-50 text-slate-800">
                        {#each dndItems as column (column.id)}
                            <ThFilter {handler} filterBy={column.name} customClass={'dragging'} />
                        {/each}
                    </tr>
                </thead>
                <tbody class="border-0">
                    {#each $rows as row}
                        <tr class={getClasses(row)}>
                            {#each dndItems as column (column.id)}
                                {#if column.name.toLowerCase().includes('timezone')}
                                    <td class="whitespace-normal text-ellipsis overflow-hidden max-width:1px;">
                                        <span class="badge variant-soft-success">{row[column.name]}</span>
                                    </td>
                                {:else if column.name.toLowerCase().includes('defect')}
                                    <td class="whitespace-normal text-ellipsis overflow-hidden max-width:1px;">
                                        {#if row[column.name] != ''}
                                            <span class="badge variant-soft-error">{row[column.name]}</span>
                                        {/if}
                                    </td>
                                {:else if column.name.toLowerCase() === 'pretrip' || column.name.toLowerCase() === 'posttrip'}
                                    <td class="whitespace-normal text-ellipsis overflow-hidden max-width:1px;">
                                        {#if row[column.name] != ''}
                                            <span class="badge variant-ghost-success">{row[column.name]}</span>
                                        {/if}
                                    </td>
                                {:else if column.name.toLowerCase().includes('timeclock')}
                                    <td
                                        class="whitespace-normal text-ellipsis overflow-hidden font-bold uppercase max-width:1px;"
                                    >
                                        {cutString(row[column.name])}
                                    </td>
                                {:else if column.name.toLowerCase().includes('history')}
                                    <td
                                        class="whitespace-normal text-ellipsis overflow-hidden font-light max-width:1px;"
                                    >
                                        {cutString(row[column.name])}
                                    </td>
                                {:else}
                                    <td class="whitespace-normal text-ellipsis overflow-hidden max-width:1px;">
                                        {cutString(row[column.name])}
                                    </td>
                                {/if}
                            {/each}
                        </tr>
                    {/each}
                </tbody>
            </table>
        </div>