Placeholder text in nav not positioned correctly on iPhone

Hello GeneratePress forum,

I have been developing a site on GeneratePress for the first time and so far I am loving it. I came from the Divi/Avada world. So this is just so much easier when it comes to theme customisation.

Anyway I have been customising the header for both desktop and mobile and I have come across an issue I cannot seem to resolve.

I added this snippet to implement a placeholder text in the nav search bar.

// Adds Placeholder to search in main navigation
add_filter( 'generate_navigation_search_output', function() {
    printf(
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" placeholder="Search..." class="search-field" value="%2$s" name="s" title="%3$s" />
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' )
    );
} );

It seems to work reasonably well on most devices. However, I have noticed that on Apple iPhone the text does not sit correctly in the search box.

When you test this on Crome it looks correct, but on Safari and on an actual iPhone it looks like this.

https://snag.gy/wGAEkv.jpg

Any tips would be much appreciated?