Почему конкретное изображение не отображается на Safari iOS на iPad 4?

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, было какое-то искажение. Я попытался реэкспортировать его с разными размерами, и мне не повезло. Я попытался повторно загрузить изображение и также не повезло. Наконец, я попытался повторно экспортировать изображение в другой формат и загрузить его заново. Это сработало! После того, как я реэкспортировал его с новым форматом файла, я смог экспортировать его обратно в исходный формат файла, и изображение заработало. Я могу только предположить, что в исходном изображении было какое-то искажение, которое исчезло после того, как оно было преобразовано в другой формат.