Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › background:cover and Safari

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 17, 2015 at 7:10 am #198369
    Claudia
    Participant

    Hi fellas!
    Hopefully someone can help me understand what’s happening here!
    On a webpage I have built in background-images

    ‘.pictures { position: fixed; width: 100vw; height: 100vh; background: no-repeat fixed; background-size: cover }’

    alignment is controlled via js for every image, everything works just fine – except for the newer versions of safari where – no matter what – the browser cuts of some of the image at the bottom.

    So far we have figured out that it seems to have something to do with whether the user has any toolbars active on top of the browser but still I have no idea what do to.

    Has someone else encountered this weird issue and might be able to help?
    I’d be really thankful! :)

    March 17, 2015 at 7:27 am #198371
    Paulie_D
    Member

    You might want to look into the Known Issues at CanIUse.com

    http://caniuse.com/#feat=viewport-units

    However, since this is Safari-only issue and only one some machines it’s not likely to be a solvable CSS issue as such, more of a browser issue I suspect.

    March 17, 2015 at 8:07 am #198373
    Shikkediel
    Participant

    Have you tried resizing the browser window on desktop to see what happens with the background? From what I know, it is what can be expected from background-size: cover. Unless the aspect ratio is exactly that of the image, some of it will always be cut off. But maybe I’m missing something here.

    March 17, 2015 at 8:23 am #198374
    Claudia
    Participant

    thanks Paulie, I’ve tried to go with measures in % instead of the viewport-units but I’m afraid you are right.


    @shikkediel    : sure I’ve tried. But if I’m aligning my picture to bottom center it should cut it off at the top and not up to a certain point at the bottom.

    I’ve checked on other sites with full screen backgrounds now and they all do the same thing in safari 8. Seems to be browser related issue, but it could’ve been possible, that someone may know a work-around :)

    Thanks for you help though!

    March 17, 2015 at 9:09 am #198379
    Shikkediel
    Participant

    Okay, no problem. Didn’t know about the bottom alignment. I read on SO it’s likely to be related to background-attachment: fixed :

    http://stackoverflow.com/a/21456799/3168107

    Hope that solves it.

    March 17, 2015 at 12:08 pm #198403
    Shikkediel
    Participant

    That’s also in the CanIUse spec I see… use that site a lot but never realised known issues were listed as well.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.