offsetWidth de Javascript ne fonctionne pas pour Safari

Question

J'ai un div au milieu de la page qui devient collant juste sous le menu d'en-tête sur le défilement de la page. Le problème est l'utilisation de offsetWidth n'ajoute aucune largeur à la div correspondante dans Safari, donc la largeur de div collant ne s'adapte pas à la taille de l'écran.

J'ai fait ma recherche en ligne et j'ai vu quelques suggestions et hacks (ex: this link), mais aucun d'entre eux n'a vraiment fonctionné dans mon cas.

Puisque offsetWidth est censé être supporté par tous les navigateurs, je ne vois pas pourquoi Safari a un problème avec cela. Le code est ci-dessous:

JS:

const scheduleControls = document.querySelector('.schedule-controls'); 
const wrap = document.querySelector('.schedule-controls-wrapper'); 

function fixControls(){ 
     const scrollTop = document.body.scrollTop; 
     const wrapOffsetTop = wrap.offsetTop; 
     if((document.querySelector('.section-live').offsetTop - 240) <= scrollTop) { 
      scheduleControls.classList.remove('fixed'); 
      scheduleControls.style = ''; 
     } else if (scrollTop + document.querySelector('.js_site-header').offsetHeight >= wrapOffsetTop) { 
      scheduleControls.classList.add('fixed'); 
      scheduleControls.style = `width:${wrap.offsetWidth}px;`; 
     } else { 
      scheduleControls.classList.remove('fixed'); 
      scheduleControls.style = ''; 
     } 
     } 

CSS:

.schedule-controls { 
    display: flex; 
    height: 70px; 
    transition: all 0.125s ease; 

    &.fixed { 
    position: fixed; 
    top: 60px; 
    height: 80px; 
    border-top: 10px solid $white; 
    background: $white; 

    @media (min-width: $bp-m){ 
     top: 162px; 
    } 
} 

HTML:

  <div class="schedule-loading-wrapper js_schedule-loading-wrapper hidden"> 
       <div class="schedule-controls-wrapper" id="scheduleControlsWrapper"> 
        <div class="schedule-controls"> 
    </div> 
</div> 

Answer 1

J'ai changé

scheduleControls.style = `width:${wrap.offsetWidth}px;`; 

à

scheduleControls.style.width = wrap.offsetWidth + "px"; 

Maintenant, il fonctionne dans Safari et tous les autres navigateurs.