Почему данный JS-скрипт не работает на Safari?

Question

[Reflections]

Конструктор - Tilda.
Скрипт меняет значение атрибута href в теге 'a', который является пунктом бургер-меню. Для планшетной/мобильной версии на сайте подгружаются разные слайдеры. Соответственно, когда экран <=980, то href нужен на другой id, т.к блок сменился.

Opera/Chrome мобильные - все работает.
Safari на iPad - работает.
Именно на мобильном Safari для iPhone отказывается работать.

let burgerMenu = document.querySelector('.burger-bg'),
        burgerIcon = document.querySelector('.burger'),
        headerButton1 = document.querySelector('.header-button-1'),
        headerButton2 = document.querySelector('.header-button-2'),
        headerButton3 = document.querySelector('.header-button-3'),
        headerButton4 = document.querySelector('.header-button-4');
    
        let headerButton1Collection = headerButton1.getElementsByTagName('a');
        let headerButton1Link = headerButton1Collection[0];
        
    if (document.documentElement.clientWidth <= 980 && document.documentElement.clientWidth > 640) {
        headerButton1Link.setAttribute('href', '#rec411348257');
        } else if (document.documentElement.clientWidth <= 640) {
            headerButton1Link.setAttribute('href', '#rec411353706');
        } else {
            headerButton1Link.setAttribute('href', '#rec408950071');
        };

Comments

[キム ファイブプラス]

https://api.jquery.com/outerwidth/

[Reflections]

キム ファイブプラス, поясните пожалуйста? С jQuery внутри не знаком практически

[キム ファイブプラス]

Reflections, jquery здесь не при чем. там объяснена вероятная причина различиня ширины получаемой из clientWidth.

[Tilda Master]

Мне кажется или тут что-то супер простое, написали супер сложно?
Есть демка?