элементы с background-attachment: исправлено, не ведет себя так же на мобильном телефоне, как на рабочем столе - PullRequest
Новая
       82

элементы с background-attachment: исправлено, не ведет себя так же на мобильном телефоне, как на рабочем столе

0 голосов
/ 01 июля 2018

Похоже, эта проблема известна уже несколько лет. Я попытался применить размытый фон к внутренним элементам с классом ".blurred-bg" согласно этому примеру https://codepen.io/ariona/pen/geFIK. В качестве фона элемента тела применяется одно изображение с четкой версией, а размытая версия того же изображения применяется к элементам класса .blurred-bg.


Вот мой код Знаете ли вы, что я могу попробовать, чтобы он работал? 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>blurred background sablona</title>
        <style>
            body {
                margin: 0px;
                padding: 0px;                
                background-image: url("https://lh4.googleusercontent.com/-3eBjuQpOGFw/U47yh_-OycI/AAAAAAAAI2U/uaU5pK49N1w/s1600/normal.jpg");
                background-repeat: no-repeat;
                background-size: cover;
                background-attachment: fixed;
            }
            
            .blurred-bg {
                background-image: url("https://lh3.googleusercontent.com/-m8TxQMObg6c/U474EWu7Y9I/AAAAAAAAI2k/xkRGoIEC1iU/s1600/blur.jpg");
                background-repeat: no-repeat;
                background-size: cover;
                    -moz-background-size: cover;
                    -o-background-size: cover;
                    -webkit-background-size: cover;
                background-attachment: fixed;
                border-radius: 10px;
            }
            
            
            #centered_div {background: red;padding: 10px; text-align: center;color: white}
            .LISTS_CONTAINER{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                overflow-x: auto;
                justify-content: center;
            }
            .LIST_WRAPPER {
                margin: 20px;
                box-shadow: 
                    0 2px 2px 0 rgba(0,0,0,0.14), 
                    0 3px 1px -2px rgba(0,0,0,0.12), 
                    0 1px 5px 0 rgba(0,0,0,0.2);
                box-sizing: border-box;
                width:; /* width cannot be set, because this div needs to adjust to its content*/
                height:; /* height cannot be set, because this div needs to adjust to its content*/
            }
            .LIST{
                grid-gap: 0px;
                width: 400px;
                height: 305px;
                position: relative; /* this needs to stay relative */
                background: rgba(0,0,0,); /*change opacity to make div darker*/
                border-radius: 10px;
                color: white;
                font-size: 30px;
                text-align: center;
                margin-top: 10px;
            }
            
        </style>
    </head>
    <body>
        <div id="centered_div">
            DIVs with blurred background while you scroll.<br>On desktop Safari & Chrome it works, but on mobile the background is no more fixed.
        </div> 
        
        <div class="LISTS_CONTAINER">
            <div class="LIST_WRAPPER blurred-bg">
                <div class="LIST">scroll down</div>
            </div>
            
            <div class="LIST_WRAPPER blurred-bg">
                <div class="LIST">scroll down</div>
            </div>
            
            <div class="LIST_WRAPPER blurred-bg">
                <div class="LIST">scroll down</div>
            </div>
            
            <div class="LIST_WRAPPER blurred-bg">
                <div class="LIST">scroll down</div>
            </div>
            
            <div class="LIST_WRAPPER blurred-bg">
                <div class="LIST">scroll down</div>
            </div>
            
            <div class="LIST_WRAPPER blurred-bg">
                <div class="LIST">scroll down</div>
            </div>
            
            <div class="LIST_WRAPPER blurred-bg">
                <div class="LIST">scroll down</div>
            </div>
            
            <div class="LIST_WRAPPER blurred-bg">
                <div class="LIST">scroll down</div>
            </div>
        </div>
        
    </body>
</html>


Уже пробовал:

1. попытка: с использованием JavaScript, добавив: 

    $ (window).scroll(function() {
        var scrolledY = $(window).scrollTop();
        $('.blurred-bg').css('background-position', 'left' + ((scrolledY)) + 'px');
    });

, а также пришлось применить background-position: left top к стилям для класса .blurred-bg.
Проверено на планшете и мобильном телефоне - безуспешно.

2. Попытка: Оберните все содержимое, находящееся в теле, в одну родительскую оболочку, установите высоту 500 пикселей и переполните до авто.
Проверено на планшете и мобильном телефоне - безуспешно.

3. попытка: изменение свойства с backgroundAttachment='fixed'; на backgroundAttachment='scroll'; также не помогла.


На рабочем столе это работает хорошо, но в мобильных браузерах эффект не работает, так как background-attachment: fixed; больше не поддерживается. Это требует более высокой производительности, что не очень хорошо для мобильных устройств в соответствии с тем, что я нашел в Интернете. Я нашел различные обходные пути, а также много идей о постах переполнения стека, но ни одна из них не сработала для меня. Уже утро, и я не заставил его работать, так что, возможно, у вас, ребята, есть идея.

1 Ответ

0 голосов
/ 01 июля 2018

У меня тоже была такая же проблема. К сожалению, мобильные браузеры отключили эту функцию, потому что она может быть слишком дорогой для них. Это работает на Firefox, хотя.

...