Find out how to take away bizarre white part behind ios26 searchbar?

const ruler = doc.getElementById('ruler');
const indicator = doc.getElementById('indicator');

// Genereer ticks zoals bij een meetlat (elke 10e langer)
const totalTicks = 150;
for (let i = 0; i < totalTicks; i++) {
    const tick = doc.createElement('div');
    tick.classList.add('tick');
    if (i % 10 === 0) tick.classList.add('lengthy');
    ruler.appendChild(tick);
}

let activeIndex = 0;

perform moveTo(index) {
    const hyperlink = hyperlinks[index];
    const linkRect = hyperlink.getBoundingClientRect();
    const parentRect = hyperlink.parentElement.getBoundingClientRect();

    const centerOffset = linkRect.left - parentRect.left + linkRect.width / 2;

    ruler.fashion.rework = `translateX(${centerOffset - ruler.offsetWidth / 2}px)`;
    indicator.fashion.left = `${centerOffset}px`;

    hyperlinks.forEach(a => a.classList.take away('lively'));
    hyperlink.classList.add('lively');
}

// Hover functionaliteit
hyperlinks.forEach((hyperlink, index) => {
    hyperlink.addEventListener('mouseenter', () => moveTo(index));
    hyperlink.addEventListener('click on', () => {
        activeIndex = index;
        moveTo(index);
    });
});

doc.querySelector('.nav-links').addEventListener('mouseleave', () => {
    moveTo(activeIndex);
});

// Init bij laden van pagina
window.addEventListener('load', () => {
    const path = window.location.pathname;

    hyperlinks.forEach((hyperlink, index) => {
        const href = hyperlink.getAttribute('href');
        if (path.endsWith(href)) activeIndex = index;
    });

    moveTo(activeIndex);
});

// Hamburger & mobiel menu
const hamburger = doc.getElementById('hamburger');
const mobileMenu = doc.getElementById('mobileMenu');
const mobileLinks = mobileMenu.querySelectorAll('a');
const desktopLinks = doc.querySelectorAll('.nav-links a');

let scrollPosition = 0;

perform openMobileMenu() {
    hamburger.classList.add('opened');
    hamburger.setAttribute('aria-expanded', 'true');
    mobileMenu.classList.add('open');

    // Physique scroll blokkeren
    scrollPosition = window.scrollY;
    doc.physique.fashion.place = 'mounted';
    doc.physique.fashion.prime = `-${scrollPosition}px`;
    doc.physique.fashion.left="0";
    doc.physique.fashion.proper="0";
    doc.physique.fashion.overflow = 'hidden';
}

perform closeMobileMenu() {
    hamburger.classList.take away('opened');
    hamburger.setAttribute('aria-expanded', 'false');
    mobileMenu.classList.take away('open');

    // Physique scroll weer toestaan
    doc.physique.fashion.place = '';
    doc.physique.fashion.prime = '';
    doc.physique.fashion.left="";
    doc.physique.fashion.proper="";
    doc.physique.fashion.overflow = '';

    // Scroll terugzetten naar vorige positie
    window.scrollTo(0, scrollPosition);
}

hamburger.addEventListener('click on', () => {
    if (hamburger.classList.accommodates('opened')) {
        closeMobileMenu();
    } else {
        openMobileMenu();
    }
});

// Menu sluiten bij klikken op hyperlink in mobiel menu + lively class bijhouden
mobileLinks.forEach((hyperlink, index) => {
    hyperlink.dataset.index = index;
    hyperlink.addEventListener('click on', () => {
        closeMobileMenu();

        // Energetic class mobiel
        mobileLinks.forEach(l => l.classList.take away('lively'));
        hyperlink.classList.add('lively');

        // Energetic class desktop
        desktopLinks.forEach(dl => dl.classList.take away('lively'));
        desktopLinks[index].classList.add('lively');

        // Replace activeIndex
        activeIndex = index;
        moveTo(activeIndex);
    });
});

// Bij resize: sluit mobiel menu bij desktop & zet scroll aan
window.addEventListener('resize', () => {
    if (window.innerWidth > 900) {
        closeMobileMenu();
    }
});

/* =========================
   Navbar
========================= */
.navbar {
    background: #fff;
    place: mounted;
    prime: 0;
    width: 100%;
    padding: 10px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    z-index: 9999;
    transition: rework 0.3s ease-in-out;

}

.navbar .container {
    max-width: 1600px;
    padding: 0 150px;
    margin: 0 auto;
    show: flex;
    align-items: heart;
    justify-content: heart;
    place: relative;
    z-index: 10500;
}

.logo-wrapper {
    place: absolute;
    left: 50%;
    rework: translateX(-50%);
    z-index: 1;
}

.brand {
    top: 60px;
}

/* --- Nav hyperlinks --- */
.nav-wrapper {
    show: flex;
    flex-direction: column;
    align-items: heart;
    place: relative;
}

.nav-links {
    show: flex;
    hole: 40px;
    place: relative;
    z-index: 2;
}

.nav-links a {
    text-decoration: none;
    font-size: 21px;
    shade: #535353;
    place: relative;
    transition: shade 0.3s ease, rework 0.3s ease;
    text-shadow: 1px 1px 2px rgba(131, 131, 131, 0.4);
}

.nav-links a:hover,
.nav-links a.lively {
    rework: scale(1.05);
    shade: var(--button-hover);
    opacity: 0.9;
}

/* --- Hamburger button --- */
.menu {
    background: clear;
    border: none;
    cursor: pointer;
    show: flex;
    padding: 0;
    place: absolute;
    proper: 20px;
    prime: 50%;
    rework: translateY(-50%);
    z-index: 9000;
}

.menu svg {
    pointer-events: none;
}

.line {
    fill: none;
    stroke: #535353;
    stroke-width: 6;
    transition:
            stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
            stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line1, .line3 {
    stroke-dasharray: 60 207;
}

.line2 {
    stroke-dasharray: 60 60;
}

.opened .line1,
.opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
}

.opened .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
}

/* --- Ruler styling --- */
.ruler-container {
    place: relative;
    top: 30px;
    width: 100%;
    overflow: hidden;
}

.ruler-container::earlier than,
.ruler-container::after {
    content material: "";
    place: absolute;
    prime: 0;
    width: 80px;
    top: 100%;
    z-index: 3;
    pointer-events: none;
}

.ruler-container::earlier than {
    left: 0;
    background: linear-gradient(to proper, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

.ruler-container::after {
    proper: 0;
    background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

.ruler {
    show: flex;
    place: absolute;
    top: 100%;
    align-items: flex-end;
    transition: rework 0.5s ease;
}

.tick {
    width: 2px;
    top: 12px;
    background: #5a595966;
    margin-right: 6px;
    box-shadow: 0 1px 3px rgba(90, 89, 89, 0.4);
}

.tick.lengthy {
    top: 18px;
    background: rgba(16, 16, 16, 0.4);
    box-shadow: 0 2px 6px rgba(35, 35, 35, 0.4);
}

.indicator {
    place: absolute;
    prime: 5px;
    width: 4px;
    top: 24px;
    background: var(--button-color);
    transition: left 0.5s ease;
    z-index: 8000;
    box-shadow: 0 0 10px rgba(0, 119, 204, 0.5);

    /* FIX: forceer aparte layer zodat kleur niet verdwijnt */
    rework: translateZ(0);
    will-change: left, rework, background;
}

/* --- Mobiel menu --- */
.mobile-menu {
    place: mounted;
    prime: 100px;
    left: 0;
    width: 100%;
    top: calc(100vh - 100px);
    background: #fff;
    show: flex;
    flex-direction: column;
    justify-content: heart;
    align-items: heart;
    hole: 30px;
    opacity: 0;
    pointer-events: none;
    rework: translateY(100%);
    transition: all 0.4s ease;
    font-size: 24px;
    font-weight: 500;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

}

.mobile-menu.open {
    opacity: 1;
    pointer-events: auto;
    rework: translateY(0);
    overflow: hidden
}


.mobile-menu a {
    shade: var(--button-color);
    text-decoration: none;
    font-size: 30px;
    transition: shade 0.3s ease;
}

.mobile-menu a:hover {
    background-color: var(--button-hover);
    rework: translateY(-2px);
    opacity: 0.9;
}

/* --- Navbar responsive --- */
@media (min-width: 1001px) {
    .logo-wrapper {
        place: static;
        rework: none;
    }
    .navbar .container {
        justify-content: space-between;
    }
    .menu {
        show: none;
    }
}

@media (max-width: 1000px) {
    .nav-links {
        show: none;
    }
    .navbar {
        padding: 50px 0;
    }
    .ruler-container {
        show: none;
    }
    .brand {
        z-index: 9000;
    }
    .navbar .container {
        padding: 0 50px;
        justify-content: heart;
    }
    .logo-wrapper {
        place: absolute;
        left: 50%;
        rework: translateX(-50%);
        z-index: 1;
    }
}

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8" />

    <meta title="viewport" content material="width=device-width, initial-scale=1, viewport-fit=cowl">
    <title>Bart Fiddelaers Bouwwerken</title>
    <meta title="theme-color" content material="clear">
    <meta title="apple-mobile-web-app-status-bar-style" content material="black-translucent">
    <hyperlink rel="stylesheet" href="belongings/index.css" />
    <hyperlink rel="preconnect" href="https://fonts.googleapis.com">
    <hyperlink rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <hyperlink href="https://fonts.googleapis.com/css2?household=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&show=swap" rel="stylesheet">
</head>

<physique>
<button id="scrollTopBtn" title="Terug naar boven">↑</button>

<header class="navbar">
    <div class="container">
        <!-- Hamburger rechts -->
        <button class="menu" id="hamburger" aria-label="Essential Menu" aria-expanded="false">
            <svg width="40" top="40" viewBox="0 0 100 100">
                <path class="line line1"
                      d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331
            94.543142,77.980673 90.966081,81.670246 85.259173,81.668997
            79.552261,81.667751 75.000211,74.999942 75.000211,74.999942
            L 25.000021,25.000058" />
                <path class="line line2" d="M 20,50 H 80" />
                <path class="line line3"
                      d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669
            94.543142,22.019327 90.966081,18.329754 85.259173,18.331003
            79.552261,18.332249 75.000211,25.000058 75.000211,25.000058
            L 25.000021,74.999942" />
            </svg>
        </button>

        <!-- Emblem gecentreerd -->
        <div class="logo-wrapper">
            <img class="brand" src="belongings/logobf.png" alt="Emblem">
        </div>

        <!-- Desktop navigatie -->
        <div class="nav-wrapper">
            <nav class="nav-links">
                <a href="index.html" data-index="0" class="lively">Residence</a>
                <a href="overons.html" data-index="1">Over ons</a>
                <a href="Diensten.html" data-index="2">Diensten</a>
                <a href="realisatie.html" data-index="3">Realisaties</a>
                <a href="#contact" data-index="4">Contact</a>
            </nav>
            <div class="ruler-container">
                <div class="ruler" id="ruler"></div>
                <div class="indicator" id="indicator"></div>
            </div>
        </div>
    </div>


    <!-- Mobiel menu buiten .container -->
    <nav class="mobile-menu" id="mobileMenu">
        <a href="index.html" data-index="0" class="lively">Residence</a>
        <a href="overons.html" data-index="1">Over ons</a>
        <a href="Diensten.html" data-index="2">Diensten</a>
        <a href="realisatie.html" data-index="3">Realisaties</a>
        <a href="#contact" data-index="4">Contact</a>
    </nav>
</header>
</pre>