I just wanted to post a quick question concerning any parallax background image that has dissapeared upon the new version 67 chrome update.
Currently there are two fixes that I have found online that work.
Are there any others that may work better, and can anyone let me know why the new version of chrome 67 is making background fixed images disappear?
You can add the following transform properties below to your element that contains a background image with fixed attachment. reference(1)
yourdiv {
position:relative;
background-image:url(your_image);
background-size:cover;
background-position:center;
background-attachment:fixed;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
OR you can change the position to static of the element with the background fixed image. reference(2)
yourdiv {
position:static;
background-image:url(your_image);
background-size:cover;
background-position:center;
background-attachment:fixed;
}
Hope this helps for now and thank you in advance for any answers posted.
add style
will-change: transform;
background-attachment: fixed;
Related
I'm using filter:grayscale(1) on images. The container of the image also have pseudo :after applied with a background color set to mix-blend-mode:screen. Everything seems to work, except on Safari iOS.
Here's the CSS for the images isolated:
.grid-item img {
filter:grayscale(1);
transition:filter 0.25s ease;
}
.grid-item:after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
display:block;
z-index:1;
mix-blend-mode: screen;
transition:opacity 0.25s ease;
pointer-events:none;
}
.grid-item.is-active:hover img {
filter:grayscale(0);
}
You can see the whole site here: http://www.tobiasgerhardsson.com/work/linazedig
And here's a video showing it live: https://streamable.com/a6lxe
The bug is hard to explain, but it seems like it's moving images in between the others, so that some images gets duplicated and replaced with the same image, or fragments of other images are shown in eachother. It disappears on scroll, but sometimes the bug appears again randomly.
I've tried to remove the mix-blend-mode as I thought that was causing the bug, but the bug only disappears when I remove the filter:grayscale(1) from the images. I'm also using a JS plugin for doing a flexbox masonry grid layout on desktop. But I've also removed the script temporarily, and the bug remains.
So all in all, this seems to be a problem with the filter:grayscale, but I'm not sure if it's caused by a combination of other CSS properties or not. Has anyone experienced this before and know what could be causing it? Or is it just a bug not possible to solve?
Reading this thread, I found that applying the following properties to the element with the filter makes the glitch go away:
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
Since the latest iPhone/iPad update the sidebar navigation menu is flickering while scrolling up and down.
I've been trying many approachs but nothing really works.
The first try was to prevent scrolling (body), when the menu is open:
.overflow {
position:relative;
overflow:hidden;
height:100%;
}
Unfortunately this doesn't fix the issue so I have tried this:
.overflow {
position:fixed;
overflow:hidden;
height:100%;
}
This works but when a user opens the menu the page jumps to the top and the address bar also appears. IMO not a good user experience.
I have also tried to add this to several elements:
div {
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
}
So, now I could either try to solve it with the position-fixed approach or try to avoid the flickering. I don't know why but the 'overflow:hidden' doesn't really work on iPhones.
Does anyone have a nice fix for this?
It has something to do with 'transition'. E.g. don't use 'translateX()'... use translate3d() to enable hardware acceleration and add this to the animated wrapper. Solved my problem:
.animClass {
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
Thanx to:
https://davidwalsh.name/translate3d
Normally not specifying the width and height of navigation menu causes such effect.
I'm building a portfolio site for a friend. One of the features includes an image change on hover.
I am trying to achieve this by:
Creating a div with background image
Layering another image over the top of it.
#b1 {
position:relative;
background-image: url('http://s10.postimg.org/d03f8a015/SHOT_09_060_V2.jpg');
}
#b1.img {
opacity:1;
position:absolute;
left:0;
}
#b1 img:hover {
opacity:0;
}
<div id="b1">
<img src="http://s29.postimg.org/v7eh0qmxz/SHOT_04_024_V7.jpg">
</div>
However, I cannot get the background image to appear and have tried numerous steps to troubleshoot where I'm going wrong.
The JSFiddle with my code appears to be working, but I cannot reproduce it successfully on my localhost.
You need to set CSS rules for width and height of your div that contains background image.
Example:
#b1 {
width:500px; //set your own value
height:500px; //set your own value
position:relative;
background-image: url('http://s10.postimg.org/d03f8a015/SHOT_09_060_V2.jpg');
}
I think it has something to do with the #b1.img selector. When I change that to #b1 img as I think it should be, I don't get the background image repeating across the page and I'm able to reproduce the issue of not seeing it on hover. Then I add height: 480px; width: 359px; to the #b1 tag and it works. Does that change fix it for you?
If not, try using this method instead of changing the opacity: https://stackoverflow.com/a/18813323/4285369
I tried google for help on this and it seems to be a bug in chrome but I still can't find a solution. I have taken a look at many stackoverflow questions similar to this but those solutions still didn't help.
When I try to scroll down on the page the background-image flickers and messes up.
I am using Google Chrome Version 35.0.1916.153 on Ubuntu Desktop
CSS code:
#left-container {
background-image: url('http://easource.com/wp-content/uploads/2014/07/traphouse4.jpg');
background-attachment: fixed;
background-position: -1% 0%;
background-repeat: repeat-y;
cursor: pointer;
}
You can see how it looks on http://easource.com
Also, I tried removing the background-position but still doesn't work.
As seen here: Fixed attachment background image flicker/disappear in chrome when coupled with a css transform
Try to change to position:static only.
You can keep your position as is and add the transform property to your background image element.
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
Removing overflow-y: scroll;
from body solved the issue for me.
Try adding backface-visibility: hidden;. Worked for me.
It's working fine with using position:static;
if it doesn't work, remove the position property.
You must have to use these properties to make the image fixed:
background-image: URL("your image path");
and I'm 100% sure that it will work for you in every browser.
I'm building a website that has a full width background image in the header that resizes with the page. There is an unusual flickering horizontal line that appears under the image when it is resized in Firefox. The line does not appear at full with, but blinks on and off when the size is changed. The line appears at the bottom of the background image, not the bottom of the header element.
It appears in the MacOS build of Firefox only when I tested it in OSX 10.8.4, Firefox 23.0. The problem did not appear with Windows 8, Firefox 23.0.1, or in other browsers that I have tested.
Here is the code on my header:
<header>
<h1><span>Sound Soups on Madison - Healthy & Convenient Alternatives for Your Busy Work Week</span><img src="images/sound-soups.jpg" id="logo" alt="Sound Soups"></h1>
<nav id="nav-main">
<?php echo makeLinks($nav1); ?>
</nav>
</header>
header{
padding:0 2.12765957% 35px;
overflow:hidden;
background-image:url('../images/bg-header.jpg');
background-repeat:no-repeat;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
I've tried using cover instead of 100% for the background size, and putting padding or a border under the header. Googling the problem didn't turn up anything. Thanks in advance if anyone knows the answer here.
EDIT:
The issue seems to be related to how FireFox scales the background image. The following seems to fix it for me with FireFox 23.0.1 , OSX 10.8.4
In style.css, try changing the background-size property in the header rule from 100% auto to 99.99% auto, ie
header {
background-image: url("../images/bg-header.jpg");
background-repeat: no-repeat;
background-size: 99.99% auto;
margin: 0;
overflow: hidden;
padding: 0 2.12766% 35px;
}
If I'm understanding your question correctly, check the top of the stylesheet # http://soundsoups.julie-edwards.com/css/responsive.css
You have
header{
background-image:url('../images/none.png');
padding-bottom:15px;
border-bottom:2px solid #7a918c;
margin-bottom:20px;
}
I think the border-bottom is the cause of the problem.
Good luck!
Had the same problem for a background-sized image on the body element.
I fixed it by applying the background-sized image to a positioned div element.
If that can be of any help.
I solved this problem by converting my .jpg background image to a .png. In case anyone else runs into this and can't change background-size, try this.