加载谷歌地图iframe时字体变得模糊

我在一个页面中注意到一些奇怪的东西。加载谷歌地图后，页面中的字体变得非常模糊。页面：http://aranrd.wpengine.com/contact/你可以看到，在加载谷歌地图的那一刻，它的部分、灰色区域内的字体变得模糊。这是我为联系人页面构建的页面模板。

<?php get_header(); ?>
<div class="container">
    <div id="contact-page">
        <h1><?php _e( 'CONTACT', 'aran-rd' ); ?></h1>
        <div id="primary" class="content-area contact-inner">

            <div class="row top-row">
                <div class="col-sm-6">
                    <?php echo do_shortcode('[gravityform id=2 title=false description=false ajax=false]'); ?>
                </div>
                <div class="col-sm-6">
                    <!-- google maps iframe -->
                    <iframe src="https://www.google.com/maps/d/u/1/embed?mid=zWesdBo33x1E.kHaxSgqiUyNY" width="640" height="280"></iframe>
                    <div class="row inner-row">
                        <div class="col-sm-6">
                            <div class="location-details">
                                <?php _e( '43 Haeshel Street,<br/>Caesarea Buisness Park<br/>P.O.B 3067', 'aran-rd'); ?>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="contact-details">
                                <?php _e( 'Tel: 972-4-623-9000,<br/>Fax: 972-4-627-3260<br/>E-mail: info@aran-rd.com', 'aran-rd'); ?>
                            </div>
                        </div>
                    </div><!--.inner-row-->
                </div>
            </div>

        </div><!--#primary-->
    </div><!--#contact-page-->
</div><!--.container-->
<?php get_footer(); ?>

有人知道发生了什么事吗？