-
Posts
-
I have noticed if I have parallax background image in a coloured section on the homepage (eg so it has that parallax scrolling effect), when flexislider goes through a transition, the background disappears and then reappears again. It only seems to happen in chrome. Looks to be some form of conflict. Can’t find any examples of this on your demo site of this situation, and my own site is currently only local.
Hey lounge35,
Can you give the settings you have to re-create it? I’ll try and duplicate it to see whats going on.
Regards,
Devin
It occurs on the homepage, when Fullwidth Easy Slider, normal settings with multiple sliders
These are the settings for the colour section that I added, that is having the problem. The background in the coloured section disappears an and turns white, and then reappears when the flexislider transitions to the next slide.
Color Section:
Section Colors: main content
Custom Background Image: yes
Background Image Position: repeat
Background Repeat: Repeat
Background Attachment: Fixed
Section Padding: Default
Section Top Shadow: Display Shadow
I have got the live site at http://goo.gl/w3DRO You can see the problem if you scroll down to the bottom of the homepage in chrome, and look at the woodgrain background.
Hi,
For the wooden background, don’t attach it as fixed, use scroll. There won’t be any difference to the way it displays on the page, and that blinking white color will go away.
Thanks,
NIck
Thank Nick. Yes that does fix it from turning white on the slider transition, but it does mean I lose the parallax effect on the background, where the background moves independent from the front content. But I guess that is a small thing if it is only the homepage
Thanks
Hi,
Oh. Sorry was a bit late and I failed to pay any attention to the parallax effect. Lets try to straighten that out then.
You see I don’t like that its position is ”fixed” … but what exactly is being fixed but a tiny square image being repeated. But here are a few avenues I would start with in the QA process::
A) I would see how it will look with one large image of the background fixed (no repeat and also stretch to fit). Somehow I have a feeling that this may do the trick.
B) Do you have a background color that you are using concurrently with the image, if not see if there are any changes with red or blue.
C) I would try position left/top
D) Do horizontal tiling starting from left/center
But as I said, I think the size of the tile feels wrong for what you are trying to accomplish. Stick it back in and run a few of these tests please and let us know if any difference was observed in the behavior.
Thanks,
Nick
Hey!
I tried to reproduce the issue but wasnt able to reproduce the issue. Probably some of the css changes we did already fixed the issue. We will release a new version in a few days, please update the theme then and let us know if the problem still persists once you did the update ;)
Have just tried it again with version 1.5 and it is still occurring with the latest version in chrome. Although this time the background goes to black on transition. You can view it on the homepage in the woodgrain at the bottom of the page. I am using chrome Version 27.0.1453.94 which is the latest version
Same effect with my example.
http://wl-services.de/joe/ looks perfect with Safari, but the effect is not visible with Chrome in the desktop.
Hi!
I’m having the same issue on my website.
Background image works fine when set to scroll, but when fixed, the image does not load in chrome or safari(5.1.7).
Seems to work in Opera & Firefox fine when fixed.
Image does not appear, w/ scrolling effect, at the bottom of the page, in the section Contact Us, for Chrome or Safari.
Any help or advisement would be great. Please let me know if you need more info.
Thanks
Edit; More Info:
Also, in Chrome, the fixed image appears fine on iPhone, as well, when I shrink the page-size on desktop, and all the content stacks up in one column, the image appears fine and fixed.
Hi,
I will go to the rest of you one at a time, if you left a url , but feel free to add this code and see if it improved the situation.
—-
@lounge35 the 3rd block of css will fix your issue. You can add all 3 since they all stop flickering in other areas.—
@frankwelschle the code below fixes you too as far as i can tell. i can see the violin pieces as i scroll with the css below added to your page (please optimize the big image).
—-
@alexpaulec everything looks fine to me , without the code below or with code below, i didn’t see anything blinking in chrome on windows, but since the area is the same , please try the code below and see if it makes a difference.—-
Please try this css in /css/custom.css
.alternate_color{
z-index: 0;
}
#socket {
margin-top: 0px;
z-index: 0;
}
.main_color {
position: inherit;
}Thanks,
Nick
- The topic ‘Fixed background image and flexislider bug in chrome’ is closed to new replies.