Как я могу убедиться, что заголовок Elementor отображается правильно в Safari? ⇐ CSS

[Anonymous]

Я создал веб-сайт, использующий Elementor. Я использовал конструктор тем для создания заголовка и добавил собственный JavaScript для эффектов закрепления. Он работает на всех устройствах, кроме Safari, где заголовок разбросан повсюду.
Я понятия не имею, как решить эту проблему. Поскольку у меня нет MacBook, чтобы настраивать свойства CSS непосредственно в браузере. Только iPhone для тестирования.
заголовок в Safari
заголовок в Android Chrome
Я отключил javascript и понял, что проблема не в этом. Это должны быть некоторые свойства CSS.
Вот CSS для заголовка:
/* SHRINKING HEADER */

/* MOBILE MENU */
.elementor-nav-menu--toggle.elementor-element svg {
fill: white;
}

/*== MOBILE MENU == */

.site-logo--white.elementor-widget .elementor-widget-container a img {
filter: brightness(0) invert(1);
}

.main-header.page-section {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 999;
padding: 0 120px;
}

.shrinking-header {
background: transparent;
height: 160px;
transition: all 0.2s linear !important;
-webkit-transition: all 0.2s linear !important;
-moz-transition: all 0.2s linear !important;
}

.shrinking-header.shrinking-header--white {
background: white;
}
.shrinking-header.shrinking-header--white ul li a {
color: #444444;
}
.shrinking-header.shrinking-header--white ul li a:hover {
color: #343434;
}
.shrinking-header.shrinking-header--white ul li a svg {
fill: #444444;
}
.shrinking-header.shrinking-header--white ul li a:hover svg {
fill: #343434;
}

.shrinking-header ul li a.elementor-item {
font-size: clamp(1rem, 0.9423rem + 0.2564vw, 1.25rem) !important;
}
.shrinking-header ul li a.elementor-sub-item,
.shrinking-header ul li a.elementor-item {
cursor: pointer;
}

.shrinking-header.header-shrinking-color-effects {
background: #fff;
min-height: 100px;
height: 100px !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
box-shadow: 0px 6px 30px -4px rgba(0, 0, 0, 0.05);
transition: all 0.2s linear !important;
-webkit-transition: all 0.2s linear !important;
-moz-transition: all 0.2s linear !important;
}

/* Shrinking logo image */

.shrinking-logo img {
width: 100% !important;
height: 88px !important;
transition: all 0.2s linear !important;
-webkit-transition: all 0.2s linear !important;
-moz-transition: all 0.2s linear !important;
}

.shrinking-header.header-shrinking-color-effects img {
height: 78px !important;
transition: all 0.2s linear !important;
-webkit-transition: all 0.2s linear !important;
-moz-transition: all 0.2s linear !important;
}

/* Shrinking button */

.shrinking-button a {
font-size: clamp(1rem, 0.9423rem + 0.2564vw, 1.25rem) !important;
}

.shrinking-header.header-shrinking-color-effects .shrinking-button a {
transition: all 0.2s linear !important;
-webkit-transition: all 0.2s linear !important;
-moz-transition: all 0.2s linear !important;
}

/* Shrinking menu items */

.shrinking-header.header-shrinking-color-effects ul li a {
font-size: 1.2rem;
color: #444444 !important;
transition: all 0.2s linear !important;
-webkit-transition: all 0.2s linear !important;
-moz-transition: all 0.2s linear !important;
}

.shrinking-header.header-shrinking-color-effects ul li a.elementor-sub-item {
color: #fff !important;
}

.shrinking-header ul li a:hover svg {
fill: rgba(255, 255, 255, 0.85) !important;
}
.shrinking-header.header-shrinking-color-effects ul li a:hover svg {
fill: rgba(68, 68, 68, 0.85) !important;
}

.shrinking-header.header-shrinking-color-effects
.elementor-nav-menu--dropdown
ul
li
a.elementor-item {
color: #fff !important;
}
.shrinking-header.header-shrinking-color-effects
.elementor-nav-menu--dropdown
ul
li
a.elementor-item
span
svg {
fill: #fff !important;
}

.shrinking-header svg {
transition: all 0.2s linear !important;
-webkit-transition: all 0.2s linear !important;
-moz-transition: all 0.2s linear !important;
}
.shrinking-header.header-shrinking-color-effects svg {
fill: #444444 !important;
}


Подробнее здесь: https://stackoverflow.com/questions/783 ... -on-safari