Sign in to follow this  
Followers 0
Original Poster

mobile device compatibility (CSS)

15 posts in this topic

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; 

Share this post


Link to post
Share on other sites

I've not done much with CSS, but you could try checking this post for your orientation issues.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

Tried giving background-size rather than auto?

Put image resolution in it and try...

 

meta viewport tried?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Yeah auto might be the problem,

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

Share this post


Link to post
Share on other sites

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.

1 person likes this

Share this post


Link to post
Share on other sites

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.

2 people like this

Share this post


Link to post
Share on other sites

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 >.>

Share this post


Link to post
Share on other sites

So only method is a onscroll js element O.o

 

What the heck is wrong with apple >.>

They are busy with apps ;)

Share this post


Link to post
Share on other sites

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)

1 person likes this

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.