Safari / iPhone search positioning bug

When opening the search box to type in a search on the iPhone or Safari on a Mac, the placeholder and search text is out of alignment.

https://pasteboard.co/IakIGWN.png

Not sure if this is a bug or if I have to fix CSS - I've combined the code below from a couple other threads.

This is the CSS I currently have customized for search:

.navigation-search input {
opacity: 1;
height: 70px;
}
.navigation-search input[type="search"], .navigation-search input[type="search"]:active {
color: #f3879d;
background-color: #fff;
border-top: 1px solid lightgrey;
border-bottom: 1px solid lightgrey;
font-size: 24px;
}
.navigation-search input[type="search"]:focus {
color: #f3879d;
background-color: #fff;
}

And here is the code to customize the search bar:

<?php
add_filter( 'generate_navigation_search_output', function() {
return sprintf( // WPCS: XSS ok, sanitization ok.
'<form method="get" class="search-form navigation-search" action="%1$s">
<input type="search" placeholder="Search for a recipe..." 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' )
);
} );
?>