elements with background-attachment: fixed don't behave same on mobile as on desktop
Multi tool use
elements with background-attachment: fixed don't behave same on mobile as on desktop
Seems like this issue is known for few years already.
I tried to apply blurred background to inside elements with class ".blurred-bg" as per this example https://codepen.io/ariona/pen/geFIK . It has one clear-version image applied as background of body element and blurred-version of same image is applied to elements with class .blurred-bg.
.blurred-bg
.blurred-bg
Here is my code do you know, what can I try to make it work?
<!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>
Have already tried:
1. attempt: using javascript by adding:
$ (window).scroll(function() {
var scrolledY = $(window).scrollTop();
$('.blurred-bg').css('background-position', 'left' + ((scrolledY)) + 'px');
});
and also had to apply background-position: left top to styles for class .blurred-bg .
Tested on tablet and mobile - no success.
2. attempt:
Wrapped all content which is in the body in one parent wrapper, set height to 500px and overflow to auto.
Tested on tablet and mobile - no success.
3. attempt: changing property from backgroundAttachment='fixed'; to backgroundAttachment='scroll'; also did not help.
background-position: left top
.blurred-bg
backgroundAttachment='fixed';
backgroundAttachment='scroll';
On desktop it works nicely but on mobile browsers the effect is broken since background-attachment: fixed; is not supported anymore. It demands higher performance which is not good for mobile devices according to what I found online. I have found various workarounds and also many ideas on stack-overflow posts but none of them worked for me. Its already morning and i didn't make it work so maybe you guys have idea.
background-attachment: fixed;
1 Answer
1
I too had the same issue. Well sadly, mobile browsers have that feature disabled because it can be too much costly for them. It works on Firefox though.
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
