Изменение высоты контейнера заставляет детей дрожать в сафари

Я создал этот эффект на верхнем изображении, он прилипает к верху при прокрутке и скрытии... это сайт: сайт

так что он отлично работает на Chrome, Firefox, но в Safari изображение внутри контейнера трясется, я пытался с помощью float left, также пытался установить верхнее и левое значения на 0, но это все еще трясет... У кого-нибудь есть идея, в чем проблема?

Код CSS:

.devBigImage {
    position: relative;
    margin-bottom: 2em;
    overflow: hidden;
}
.devBigImage img {
    display: block;
    height: auto;
    width: 100%;
}

JS код:

        var imageHeight = $('.devBigImage').height(),
        imageMarginBottom = $('.devBigImage').css('margin-bottom').replace(/[^-\d\.]/g, '');

    $(document).on({
        scroll: function() {
            if ($('.devBigImage').length>0) {

                var iCurScrollPos = $(this).scrollTop();

                    if (imageHeight - iCurScrollPos > 0) {
                        $('.devBigImage').css({
                            'height':imageHeight - iCurScrollPos,
                            'position':'relative',
                            'top':iScrollPos,
                            'margin-bottom':iScrollPos+parseInt(imageMarginBottom),
                        });
                    }

            }
        }
    });

HTML:

    <div class="devBigImage">
    <img src="http://www.get-covers.com/wp-content/uploads/2012/04/Colorful-Stripes.jpg">
</div>
Источник

2 ответа

Решение

Как насчет решения CSS без JavaScript?

Вы можете создать div с позицией 'fixed', что означает относительно окна, и сделать этот div с z-индексом -1, таким образом, остальная часть содержимого страницы будет сверху.

Тогда вам просто нужен какой-то прозрачный div-заполнитель, чтобы при первой загрузке страницы прозрачный div занимал верхнюю позицию, показывая основной логотип.

При прокрутке страницы прозрачный элемент прокрутки прокручивается вверх, а элемент фиксированной позиции остается на месте на заднем плане.

#background-logo {
    position: fixed;
    top: 0px;    
    margin-bottom: 2em;
    overflow: hidden;
    z-index: -1
}
#hidden-background-logo-placeholder img{
    visibility:hidden;
    opacity:0;
}

Вот JSFiddle

Источник

Я проверил ваш код в jsfiddle, который отлично работает в Safari, хотя мне пришлось изменить iScrollPos на iCurScrollPos, чтобы он работал. Я думаю, что проблема заключается в относительной позиции, которая является дорогостоящей на процессоре. Также, пожалуйста, попробуйте методы, такие как сохранение найденных объектов JQuery DOM в переменной, чтобы их не нужно было искать в DOM многократно.

var bigTmageDiv = $('.devBigImage');
var imageHeight = bigTmageDiv.height(),
    imageMarginBottom = bigTmageDiv.css('margin-bottom').replace(/[^-\d\.]/g, '');

$(document).on({
    scroll: function() {
        if (bigTmageDiv.length>0) {

            var iCurScrollPos = $(this).scrollTop();

                if (imageHeight - iCurScrollPos > 0) {
                    $('.devBigImage').css({
                        'height':imageHeight - iCurScrollPos,
                        'position':'relative',
                        'top':iScrollPos,
                        'margin-bottom':iScrollPos+parseInt(imageMarginBottom),
                    });
                }

        }
    }
});

Надеюсь, что это решит проблему или хотя бы немного оптимизирует ваш код.

Источник
Другие вопросы по тегам