Safari在内容中提供了巨大的空白区域？

Question

我的网站在除Safari之外的每个浏览器上都很好看。 在Safari中它显示了一个巨大的空白。

在这里，您可以看到Chrome和Safari之间的区别。

这是Safari：

这是Chrome：

<?php get_header();?>

<?php while (have_posts()): the_post();
    $imgId = get_post_thumbnail_id();
    $image = wp_get_attachment_image_src($imgId, 'full'); ?>
    <div class="theBiggest">
 <?php   if ($imgId) { ?>

    <div style="background-image: url(<?php echo $image[0] ?>); background-repeat: no-repeat; background-size: cover; min-height: 346px;background-position:100% 60%; " >
        <div class="text-center" style="padding-top: 130px;">
            <img src="<?php echo THEME_URL ?>/images/logo_icon_white.png" /><br>
            <div class="title-page"><?php the_title();?></div>
        </div>
    </div>
    <div class="page-bg" >

    <?php } else {   ?>

        <div class="container text-center bg-white" style="padding-top:50px;    margin-bottom: 20px;">
            <img class="top-icon" src="<?php echo get_field('top_icon')['url'] ?>" /><br>
            <?php $title = get_the_title();
                  $ar    = explode(' ', strtoupper($title)); ?>
            <span class="title-page grey-txt"><?php echo $ar[0] ?></span>
            <?php if (count($ar) > 1) {?><span class="title-page orange-txt"><?php echo $ar[1] ?></span><?php }?>
        </div>

            <!-- TRAININGEN page or Coaching page -->

                <?php if (have_rows('ups_trainingen')): ?>
                    <div class="greyBlock">
                        <?php if(is_page('Leiderschaps training')) { 
                            echo "<p>Hierom kiest u voor een <strong>training</strong> van InReach</p> ";
                            $ctn = "t";
                        } 
                        if (is_page('Leiderschaps coaching')) {
                         echo "<p>Hierom kiest u voor <strong>coaching</strong> van InReach</p> ";
                         $ctn = "c";
                        } ?>


                    <?php $i=1;?>
                <?php while (have_rows('ups_trainingen')): the_row();
                    $text         = get_sub_field("text");
                    $link_popover = get_sub_field("link/popover");
                ?>
                        <button type="button" class="orangeBtn btn " id="<?php echo $ctn . $i;?>" data-trigger="hover" data-container="body" data-toggle="popover" data-placement="bottom" data-content="<?php echo $link_popover ?>"><?php echo $text; ?></button>
                    <?php $i++; ?>
                    <?php endwhile;?>
                </div>
            <?php endif; 

        } // else $imgId

    while (have_rows('sections')) {    the_row();?>
        <div class="container page-section">
            <div class="content" >
                <?php the_sub_field('content')?>
            </div>
        </div>
<?php
}
// OVER page
if ($post->ID == 221) { ?>
        <div style="display:none">
            <div id="formpopup" class="registen_form" style="padding: 30px">
                <!-- <h2 style="padding-top:25px"><?php echo _e('Alles uit uw medewerkers halen?', 'new_inreach') ?></h2> -->
                <h2 style="padding-top:25px"><?php echo _e('Abonneer op deze gratis leiderschapstips', 'new_inreach') ?></h2>
                <!-- <h2><?php echo _e('Ontdek gratis de 3 grootste missers die u niet moet maken.', 'new_inreach') ?></h2> -->
                <?php gravity_form(7, false, false, false, '', true);?>
                <!-- <h4><?php echo _e('En ontvang regelmatig gratis tips om uw leiderschap te versterken', 'new_inreach') ?></h4> -->
                <h4></h4>
            </div>
        </div>
        <div class="container page-section text-center">
            <div style="margin-bottom: 30px;">
                <a href="#formpopup" class="greyBtn fancybox">Ontvang leiderschapstips</a>&nbsp;
                <a href="/contact" class="greyBtn">Bekijk trainingsmogelijkheden</a>&nbsp;
                <a href="/contact" class="orangeBtn">Plan een coachingssessie in</a>
            </div>
        </div>

<?php } ?>

<?php if (have_rows('info_buttons')): ?>
    <div class="info_button" >
        <p style="color:#fff;">Kies uw snelheid</p>
<?php while (have_rows('info_buttons')): the_row();
    $image = get_sub_field('image');
    $link  = get_sub_field('link');
?>
                <div><a href="<?php echo $link ?>"><img src="<?php echo $image['url']; ?>"></a></div>
            <?php endwhile;?>
        </div>
<?php endif;?>

<?php if ($post->post_content !== "") { ?>
    <div class="container text-center bg-white test"><?php the_content();?></div>
<?php } ?>

</div><!-- page-bg -->

<?php if (have_rows('orange_&_grey_buttons')): ?>
<?php while (have_rows('orange_&_grey_buttons')): the_row();
    $orangeBtnText = get_sub_field('orange_btn_text');
    $orangeBtnlink  = get_sub_field('orange_btn_link');
    $greyBtnText = get_sub_field('grey_btn_text');
    $greyBtnlink  = get_sub_field('grey_btn_link');
?>

<?php 
$footerText = get_field('footer_text');
if ($footerText) { ?>
    <div class="page-footer" style="background-color: <?php the_field('footer_color');?>">
        <div class="container"><?php echo $footerText ?></div>
    </div>

<?php } ?>

<div class="orange-grey-btns" style="background-color:<?php the_field('footer_color');?>;padding:15px 0;">  
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-sm-6 ">
                <div class="col-md-12 orange-btn">
                    <a href="<?php echo $orangeBtnlink ?>"><?php echo $orangeBtnText; ?></a>
                </div>
            </div>
            <div class="col-md-8 col-sm-6">
                <div class="col-md-12 grey-btn">
                    <a href="<?php echo $greyBtnlink ?>"><i><?php echo $greyBtnText; ?></i></a>
                </div>
            </div>
        </div>
    </div>
</div>
<?php endwhile;endif; //orange_&_grey_buttons?>



</div>
<?php endwhile; //have_posts?>
<?php get_footer();?>