Forums

Give help. Get help.

  • # March 16, 2014 at 9:19 pm

    Hi folks,
    Weird issue here where a fixed background image is not working properly in chrome. Working perfectly in safari and firefox. If I scroll up and down through the container and refresh the page, I can see the fixed photo in the correct place in relation to the how it should be working. However ,it is not working on live scroll.

    Anyone seen this before?

    .background-image-container {
    background: url(‘../assets/images/test.jpg’) no-repeat;
    background-attachment: fixed;
    background-position: 0 0;
    min-height: 540px;
    }

    # March 16, 2014 at 9:26 pm

    hey Brad,

    Wish I could help. I’ve been having issues with absolute positioning myself. It seems every device I look at, it looks different. I am currently “thinking out” the problem. It’s been a week. Teehee.

    # March 16, 2014 at 10:20 pm

    Disabled my off-canvas nav which has backface-visibility: hidden and works. Any idea how to get these to play nicely?

    # March 17, 2014 at 4:07 am

    @bradwrage

    Could you please post a link to your webpage, or maybe make a codepen.

    # March 18, 2014 at 9:07 am

    I’m sorry Brad. I may be mis-informed, but I try to use just basic CSS. I talked to my Godaddy support rep the other day, and he said that the smartphones have trouble with js. Being as about 50% of business surfing is done on telephones now, it is worrisome to me. I may be overly cautious and plumb silly, but I shy away from anything that uses js. But, you sound much more proficient and knowledgeable than I am. I am basically just trying to get my foot in the door. It is all so overwhelming and difficult to figure out, especially the SEO and security ends of web design.

    Good luck.
    Ams

    # March 18, 2014 at 9:31 am

    I talked to my Godaddy support rep the other day, and he said that the smartphones have trouble with js.

    Absolute rubbish.

    # March 18, 2014 at 10:50 am

    Disabled my off-canvas nav which has backface-visibility: hidden and works. Any idea how to get these to play nicely?

    It’s a known bug in webkit with backface-visibility (and transforms) and any ‘fixed’ element that has a parent with the backface-visibility property applied will lose its fixed position. There seems to be no fix except to remove the fixed positioned element from that context.

    Usually with fixed elements this is not a problem because they can be anywhere in the html as they are placed relative to the viewport. It may not be so easy though if you are applying the fixed background to a div in the normal flow as you probably want that div in the flow at the position it currently occupies. However without seeing your html or a demo its hard to say whether the fix is possible.

    # June 14, 2018 at 2:45 am

    I would refer you to the following solution: https://github.com/zurb/foundation-sites/issues/3155

    Pretty simple, add the following to your css:

    1. Add -webkit-backface-visibility: hidden; to show the image again.
    2. Add -webkit-transform: translateZ(0x); to remove parallax flickers on mobile phones
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag