problem with z-index with leaflet with IOS

Question

I have a webpage Find a walk which uses Leaflet to enable site visitors to find a walk in the British Isles from a specific location.

The page generates a search box and map.

<div class="search-box">
<input type="text" autocomplete="off" placeholder="Search by city, town or village" />
<div class="result" ></div>
</div>
<div id="walkingBritainMapDivWrap">
<div id="walkingBritainMapDiv" class="walkingBritainMapDiv"></div>
</div>

For all browsers except IOS the lists of results from the search are displayed in front of the map. However with IOS the list of results is hidden behind the map.

I have tried using z-index on the relevant divs but this has no effects. I understand that Laeflet uses z-indez to add layers to the map which m,ight complicate the issue.

The CSS for these divs is :-

        .search-box{
        width: 300px;
        position: relative;
        display: inline-block;
        font-size: 14px;
        margin-bottom: 12px;
    }
    .search-box input[type="text"]{
        height: 32px;
        padding: 5px 10px;
        border: 1px solid red;
        font-size: 14px;
    }
    .result{
        position: absolute;        
        z-index: 999;
        top: 100%;
        left: 0;
        background-color: white;
    }
    .search-box input[type="text"], .result{
        width: 100%;
        box-sizing: border-box;
    }
    /* Formatting result items */
    .result p{
        margin: 0;
        padding: 7px 10px;
        border: 1px solid #CCCCCC;
        border-top: none;
        cursor: pointer;
    }
    .result p:hover{
        background: #f2f2f2;
    }
    .walkingBritainMapDiv {
        padding-top: 75%;
        width: 100%;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(0, 0, 0);
        z-index: 0;
    }

Any help would be appreciated to solve this problem.