Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #22962

    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.

    #118040

    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

    #118041

    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

    #118042

    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.

    #118043

    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

    #118044

    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

    #118045

    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

    #118046

    Hey!

    I reported the issue to Kriesi – maybe we can find a fix.

    Regards,

    Peter

    #118047

    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 ;)

    #118048

    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

    #118049

    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.

    #118050

    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.

    http://drivott.com

    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

    #118051

    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.

    #118052

    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

    #118053

    That code worked for me.

    Thank you Nick!

Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Fixed background image and flexislider bug in chrome’ is closed to new replies.