I'm trying to implement CSS "background-attachment: fixed" effect on iOS, but faced with problem when user scrolling content, image flickering ( sometime ) and can't understand why it happens.
I used the hack from this article https://css-tricks.com/the-fixed-background-attachment-hack/
position: fixed;
top: 50px;
left: 0;
z-index: -1;
width: 100vw;
height: 100vh;
background-image: var(--cover);
background-position: top left;
background-repeat: no-repeat;
background-size: 100vw;
transform: translateZ(0);
will-change: transform;
#media screen and (max-width: 425px) {
background-image: var(--mobile-cover);
}
Maybe someone faced with such problem and know how to fix the problem?
One important moment, I use CSS variables for images
Related
On some devices screens (laptop), I noticed on Chrome and Microsoft Edge browsers, there is line above my backgroungd svg image, on my top menu.
It looks fine if i resize the window, for example it looks good on mobile size screen. If i change the backround height seems to be solved but it will occur on other screen sizes.
#site-nav::after {
content: '';
display: block;
position: relative;
width: 100%;
height: 99px;
top: 0;
left: 0;
z-index: -1;
background-position-y: 2px;
background-size: 100% 75px;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDVVBJRE9OIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMDAwIDI1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgIC5tYWlue2ZpbGw6IzIyMmYzNTt9CiAgICAuc2Vje2ZpbGw6I2M5ZTZmZjt9CiAgPC9zdHlsZT4KICA8Zz4KICAgIDxwYXRoIGNsYXNzPSJzZWMiIGQ9Ik0wLDEzNi4yYzEwOS43LDE0LjEsMjU5LjcsMjIuNiw0MDMuOCwyMS42YzM0MC4xLDAsNTA4LjItNTcuNiw2MTAuNS04My40QzExMDQuMSw1Ni4zLDEyNTAuNSwwLDE2NTMuNiwwYzEyOSwwLDI0Ny4zLDUuNiwzNDYuNCwxNS4zVjI1MEgwVjE1NC4yeiIvPgogICAgPHBhdGggY2xhc3M9Im1haW4iIGQ9Ik0wLDE1NC4yYzEwOS43LDE0LjEsMjU0LjcsMjIuNiw0MTMuOCwyMi42YzM0Mi4xLDAsNTA4LjItNTcuNiw2MjAuNS04OC40QzExNTEuMSw1Ni4zLDEzMTEuNSwwLDE2NTMuNiwwYzEyOSwwLDI0Ny4zLDUuNiwzNDYuNCwxNS4zVjI1MEgwVjE1NC4yeiIvPgogIDwvZz4KPC9zdmc+);
transform: scale(-1,-1.4);
}
I add a printscreen of the error here
On firefox, it seems to be fine.
I wonder if the top line is not a part of the svg image. Unfortunatelly I am not a svg expert.
Thank you for help.
Try removing background-position-y from your css. So that the new CSS looks like this.
#site-nav::after {
content: '';
display: block;
position: relative;
width: 100%;
height: 99px;
top: 0;
left: 0;
z-index: -1;
background-size: 100% 75px;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDVVBJRE9OIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMDAwIDI1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgIC5tYWlue2ZpbGw6IzIyMmYzNTt9CiAgICAuc2Vje2ZpbGw6I2M5ZTZmZjt9CiAgPC9zdHlsZT4KICA8Zz4KICAgIDxwYXRoIGNsYXNzPSJzZWMiIGQ9Ik0wLDEzNi4yYzEwOS43LDE0LjEsMjU5LjcsMjIuNiw0MDMuOCwyMS42YzM0MC4xLDAsNTA4LjItNTcuNiw2MTAuNS04My40QzExMDQuMSw1Ni4zLDEyNTAuNSwwLDE2NTMuNiwwYzEyOSwwLDI0Ny4zLDUuNiwzNDYuNCwxNS4zVjI1MEgwVjE1NC4yeiIvPgogICAgPHBhdGggY2xhc3M9Im1haW4iIGQ9Ik0wLDE1NC4yYzEwOS43LDE0LjEsMjU0LjcsMjIuNiw0MTMuOCwyMi42YzM0Mi4xLDAsNTA4LjItNTcuNiw2MjAuNS04OC40QzExNTEuMSw1Ni4zLDEzMTEuNSwwLDE2NTMuNiwwYzEyOSwwLDI0Ny4zLDUuNiwzNDYuNCwxNS4zVjI1MEgwVjE1NC4yeiIvPgogIDwvZz4KPC9zdmc+);
transform: scale(-1,-1.4);
}
I am trying to fit a div inside a shape using mix-blend-mode:screen. Although on large screen it looks good when I use chrome reponsive tool on some screens are shown borders like this is there a way to remove these borders?
Here is my code
.banner-img {
width: 100%;
max-width: 1000px;
height: 100%;
background-size: 100% 100%;
margin-left: -75px;
display: flex;
align-items: center;
position: relative;
background-color: rgba(51,51,51,0.8);
background-blend-mode: overlay;
&::before{
content: "";
position: absolute;
height: 100%;
top: 0;
left: 0;
width: 100%;
background-image: url('../../../Assets/mask.jpg');
background-size: 100% 100%;
border: none;
mix-blend-mode: screen;
}
<div className={`banner-content ${props.styles}`}>
<div className="banner-img" style={{ backgroundImage: `url(${props.img})` }}>
<div className="content">{<props.content />}</div>
</div>
<div className="content">{props.children}</div>
</div>
https://jsfiddle.net/d5rw3zkg/8/
UPDATE: the original 'fix' in this answer hid the border but altered the shape. #Alfred found that changing the height to calc(100% + 1px) rather than 101% fixed the problem - both hiding the border and keeping the correct shape.
Here's the original answer and the surmise as to the reason:
This is not a full answer to the question as I cannot reproduce the problem on any of the devices I have. But I have seen similar problems before where somehow there isn't an exact overlap of two images. This is possibly because of the mismatch between CSS and actual device pixels (which can be several pixels to make up one CSS pixel) but this is just a surmise.
Could you try this experiment? On a device where you can see the problem, also run it with just one setting changed in the SCSS. This is to see whether we can get the mask to stretch just beyond the underlying image so there is no chance of a sliver being left behind.
&::before{
content: "";
position: absolute;
height: 100%;/**CHANGE TO 101% (original answer) now calc(100% + 1px) **/
top: 0;
left: 0;
width: 100%;
background-image: url('../../../Assets/mask.jpg');
background-size: 100% 100%;
border: none;
mix-blend-mode: screen;
}
body{
background-color: #000;
height: 100vh;
}
section {
width: 100%;
height: 100%;
}
#section1 {
background-color: #f0f0f0;
}
#bubbles1, #bubbles2{
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
#bubbles1{
background: url('img/greencat.png') 60% 50% no-repeat fixed;
background-color: #f0f0f0;
}
#bubbles2{
background: url('img/catb.png') 60% 50% no-repeat fixed;
position: fixed;
-webkit-backface-visibility: hidden;
}
#fish{
background: transparent url('img/textgreen.png') no-repeat bottom left fixed;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
}
#fish1{
background: transparent url('img/textblue.png') no-repeat bottom left fixed;
height: 100%;
width: 100%;
/* position: absolute;*/
top: 0px;
}
#media screen and (max-width: 860px){
ound-image: url('img/greencat-mobile.png');
background-size: 250vw 100vh;
background-position: 53% 50%;
}
#bubbles2{
background-image: url('img/catb-mobile.png');
background-size: 250vw 100vh;
background-position: 53% 50%;
position: fixed;
-webkit-backface-visibility: hidden;
}
#fish{
background: transparent url('http://www.intomorrow.com/wp-content/uploads/2016/06/Barnsley-House-Spa-2-844x800.jpg') no-repeat 3% 78% fixed;
position: absolute;
}
#fish1{
background: transparent url('http://www.intomorrow.com/wp-content/uploads/2016/08/Fairmont-Pittsburgh-30-844x800.jpg') no-repeat 3% 78% fixed;
}
}
<section id="section1">
<div id="bubbles1"></div>
<div id="fish"></div>
</section>
<section id="section2">
<div id="bubbles2"></div>
<div id="fish1"></div>
</section>
This is my html and css, the problem is when i scroll on mobile devices than image is flikering, not stick to the fixed position. I gave the position fixed in css but it is not working. I checked on Android, Windows and Apple devices.
Android : first image moved up on scrolling
Windows : first image displaying proper but when i scroll for second image than its flikering
Apple : display white background insted of image, second image visible but its flikering on scroll
Most mobile devices have a delay in updating the background position after scrolling a page with fixed backgrounds.
i came across this problem too.
i know 3 possible fixes for this
1. you can try using a pseudo-element and add background fixed to it
2. you can make another div inside the fixed div. and add background to that div
3. use -webkit-transform: translateZ(0x); transform:translateZ(0) to force hardware acceleration
see more here
http://caniuse.com/#search=background-attachment
Background size on iOS
let me know if it helps
I've wrote a little experiment for a parallax background header using only CSS: http://codepen.io/Kageetai/pen/yIdAq?editors=110
It's works very well in Chrome but in Firefox the header has a strange behaviour, even though Codepen uses -prefix-free. The background images shoves itself on top of the content below and the jumbs after scrolling down a bit.
It uses the technique found here, which I think is very elegant. So I copied most of it and wanted to apply it for a header.
I suppose it has something to do with that part, which mainly makes the parallax happening:
.parallax {
position: relative;
//padding: 25vh 10%;
padding: 0.1px; // strange behaviour with padding 0
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
transform-style: inherit;
background: 50% 50% / cover;
&:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
background: 50% 50% / cover;
}
}
header {
text-align: center;
color: whitesmoke;
&:before {
background-image: url(http://www.theloftberlin.com/wp-content/uploads/2013/09/2013-berlin.jpg) !important;
transform: translateZ(-1px) scale(2);
z-index:-1;
}
}
And furthermore the fixed navigation isn't fixed at all on Chrome and Firefox.
Anyone any ideas?
Thanks!
Add position:relative to your #wrapper that will fix overlapping of image on the text.
add z-index="2" to .nav
check the codepen here Code pen
i have a left admin panel which is set in percentage width. the problem is that i have a repeating background in it and when i use background-size to tuck-in the background image to the size of percentage-based width, the image just disappears in chrome. in firefox it works fine. But when i use ctrl - to zoom-out the display, the image appears.
the css of the left panel is:
.adminmenuback {
width: 30%;
background: url(../images/leftpanel_bg.png) left top repeat-y;
background-size: 100%;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
height: 100%;
}
pls help.
You can use 100% 100% for background size.
.adminmenuback {
width: 30%;
background: url(../images/leftpanel_bg.png) left top;
background-size: 100% 100%;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
height: 100%;
}
http://jsfiddle.net/aEJRB/
try this
background-size:contain;
background-size: cover;
Try this.