html - 为什么特定图像不会显示在 iPad 4 上的 Safari iOS 上？

Question

我有一个包含四个不同标签的页面，其中包含一些内容。每个部分标签都有一个背景图片。

奇怪的是，有两张背景图片(第二张和第四张)出现了，而另外两张没有。首先，我尝试通过重新上传背景图片来替换不会显示的图片。它仍然没有出现。接下来，我尝试使背景图像的大小与其中一张工作背景图像的大小(尺寸)相同。这也没有用。接下来，我尝试使用其他背景图像之一作为未显示其背景图像的两个部分的背景图像。这确实出现了!

因此出于某种原因，即使图像与另一个工作图像的大小相同，即使源图像 url 工作正常，这两张图像也不会显示在 iPad 上。

这是一个 wordpress 网站，我发布了这些部分的 wordpress 模板代码。

<?php 
    $args = array(
        'cat' => 4,
        'posts_per_page' => -1
    );
?>

<?php $about_query = new WP_Query($args); ?>

<?php if($about_query->have_posts()): ?>
    <?php while($about_query->have_posts()): ?>

        <?php $about_query->the_post(); ?>

        <?php $about_bg = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>

        <article class="about-section" style="background-image: url('<?= $about_bg; ?>');">

            <div class="row">

                <div class="about-content small-12 medium-12 large-12 column">

                    <h2 class="about-header">
                        <?php the_title(); ?>
                    </h2>

                    <?php the_content(); ?>

                </div>

            </div>

        </article>

    <?php endwhile; ?>
<?php endif; ?>

这是有问题的 CSS:

.about-section {
    @include background-size(cover); /* Compass Include */

    position: relative;
    height: 850px;
    min-height: 850px;
    text-align: center;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

知道发生了什么吗？

Answer 1

上传到 Wordpress 的原始图像似乎存在某种损坏。我尝试用不同的尺寸重新导出它，但没有成功。我尝试重新上传图像，但也没有成功。最后我尝试用不同的文件格式重新导出图像并重新上传。这奏效了!一旦我用新的文件格式重新导出它，我就可以将它导出回原始文件格式并且图像可以正常工作。我只能假设原始图像中存在某种损坏，在将其转换为不同格式后消失了。