My site contains unwanted empty space on iPhones running Safari on the top and bottom of the screen. This empty space has the same background color as my main body background color. This issue only happens on Safari as shown here. Hidden behind the URL in the first image is a blue bar identical to the one in the second image below the footer (shows just the url and the secure site symbol). iPhones running Chrome do not have this issue.
I would appreciate any suggestions. My first instinct is to identify 2 HTML classes referencing these safari-exclusive sections above and below the site wrapper and make them have a transparent background. On Chrome these sections have a dark gray background when using Dark theme. This would also be acceptable.
