• 0

mobile device compatibility (CSS)


Question

hello I am having some trouble with CSS compatibility with IPhones/IPads and Android devices, When the screens are rotated they do not rotate the background image with it....also on iOS devices (but works on android) the fixed scrolling does not work... any suggestions?

 

  background: "blue";
  background-position:center;
  background-image: url("/im/age/link");
  background-repeat: no-repeat;
  background-attachment: fixed;

  background-size: auto; 

Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0

Look if there are any CSS prefixes -webkit -moz etc etc.

Use media queries screen rotation to change css on screen rotation.

Use a :before element with position fixed for the bg ;)

Link to comment
Share on other sites

  • 0

Look if there are any CSS prefixes -webkit -moz etc etc.

Use media queries screen rotation to change css on screen rotation.

Use a :before element with position fixed for the bg ;)

 

 

ye I have done this... lol that is simple stuff... the problem is that iOS doesnt like the fixed rule..and i am trying to find away around that... but I have to keep it strictly CSS no ajax or JS and no adding of extra div classes

Link to comment
Share on other sites

  • 0

ye I have done this... lol that is simple stuff... the problem is that iOS doesnt like the fixed rule..and i am trying to find away around that... but I have to keep it strictly CSS no ajax or JS and no adding of extra div classes

I mean this:

html {/*normal bg*/
   background: url("/im/age/link") center no-repeat blue;
   background-attachment: fixed;
   background-size: auto;
}
html:before {/*ios bg*/
   position: fixed;
   top: 0;
   content:"";
   width: 100%;
   height: 100%;
   z-index: -1;/*You can try 0, 1 and -1*/
   background: url("/im/age/link") center no-repeat blue;
   background-attachment: fixed;
   background-size: auto;
}

Lemme know if this works, maybe you need to add display: block to html:before if it doesn't work.

Link to comment
Share on other sites

  • 0

I mean this:

html {/*normal bg*/
   background: url("/im/age/link") center no-repeat blue;
   background-attachment: fixed;
   background-size: auto;
}
html:before {/*ios bg*/
   position: fixed;
   top: 0;
   content:"";
   width: 100%;
   height: 100%;
   z-index: -1;/*You can try 0, 1 and -1*/
   background: url("/im/age/link") center no-repeat blue;
   background-attachment: fixed;
   background-size: auto;
}

Lemme know if this works, maybe you need to add display: block to html:before if it doesn't work.

Ive done this already, but doesnt work for iOS devices 

Link to comment
Share on other sites

  • 0

Ive done this already, but doesnt work for iOS devices 

So position: fixed and background attachment fixed don't work? If that's the case it seems like something else is giving problems, I can't imagine that fixed html stuff doesn't work on iphone, which ios version did you try it on?

Link to comment
Share on other sites

  • 0

Tried giving background-size rather than auto?

Put image resolution in it and try...

 

meta viewport tried?

Link to comment
Share on other sites

  • 0

Tried giving background-size rather than auto?

Try this. Webkit is a PoS and many things related to background image do not work with auto.

Link to comment
Share on other sites

  • 0

Yeah auto might be the problem,

also never heard of background-size: auto, I only heard about 100% auto or auto 100% :/

Link to comment
Share on other sites

  • 0

Yeah auto might be the problem,

also never heard of background-size: auto, I only heard about 100% auto or auto 100% :/

auto should simply mean auto auto.

  • Like 1
Link to comment
Share on other sites

  • 0

You're in luck, two of the things Mobile Safari can't do is fixed position backgrounds and orientation changes. Firefox on Android implements it properly, iirc Chrome does as well (although they did try to get the CSS spec changed so they didn't have to), but they're old issues in Safari that Apple haven't bothered to fix.

auto should simply mean auto auto.

Yep, that's shorthand for you.

  • Like 2
Link to comment
Share on other sites

  • 0

You're in luck, two of the things Mobile Safari can't do is fixed position backgrounds and orientation changes. Firefox on Android implements it properly, iirc Chrome does as well (although they did try to get the CSS spec changed so they didn't have to), but they're old issues in Safari that Apple haven't bothered to fix.

Yep, that's shorthand for you.

So only method is a onscroll js element O.o

 

What the heck is wrong with apple >.>

Link to comment
Share on other sites

  • 0

So only method is a onscroll js element O.o

 

What the heck is wrong with apple >.>

They are busy with apps ;)

Link to comment
Share on other sites

  • 0

So only method is a onscroll js element O.o

 

What the heck is wrong with apple >.>

Yeah, Mobile Safari is a terrible browser, and there's no competition on iOS because Apple blocks 3rd party browsers.

That was honestly my main reason for switching to Android, it let me run Firefox.

Edit: Actually WebKit itself is just kinda meh due to all these random non-standard issues and bugs that never get fixed, I sort of wonder if that was why Google decided to fork it in the end, but they've got similar issues going on as well (Stuff like NaCL)

  • Like 1
Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.