flexbox容器内的徽标仅在iOS上显示为损坏

Question

我在flex容器中有一个徽标，该徽标在Windows和Android上完美运行，仅在iOS上似乎不合适。

我尝试将其定位为绝对位置，但它会破坏导航栏菜单。

   .navbar {
        padding: 0;
        display: flex;
        justify-content: space-between;

        @include mobile {
            max-width: inherit;
            padding: 0 20px;
            justify-content: flex-end;
        }

        @include medium {
            max-width: inherit;
            padding: 0 20px;
        }
         .logo {
            order: 3;
            height: 80px;
            padding: 15px 0;
            @include mobile {
                padding: 15px 0;
            }
            img {
                height: 100%;
                width: auto;
            }
        }
    }



       <nav class="navbar container" role="navigation">
            <input type="checkbox" id="nav" class="d-none">
            <label for="nav" class="nav-toggler">
                <i></i>
                <i></i>
                <i></i>
            </label>
            <div class="logo">
                <a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" class="shadowed" alt="<?php echo bloginfo('name'); ?>"></a>
            </div>
        </nav>

windows, android

ios