Jump to content



Photo

mobile device compatibility (CSS)


  • Please log in to reply
14 replies to this topic

#1 Original Poster

Original Poster

    Systems Developer

  • Tech Issues Solved: 1
  • Joined: 15-July 08
  • Location: my room
  • OS: windows 7/8, Kali, ubuntu, OSx 10.9
  • Phone: Android

Posted 19 May 2014 - 14:52

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; 




#2 Nick H.

Nick H.

    Neowinian Senior

  • Tech Issues Solved: 15
  • Joined: 28-June 04
  • Location: Switzerland

Posted 19 May 2014 - 15:06

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

#3 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 22
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 20 May 2014 - 16:22

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

#4 OP Original Poster

Original Poster

    Systems Developer

  • Tech Issues Solved: 1
  • Joined: 15-July 08
  • Location: my room
  • OS: windows 7/8, Kali, ubuntu, OSx 10.9
  • Phone: Android

Posted 21 May 2014 - 08:51

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



#5 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 22
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 21 May 2014 - 16:35

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.



#6 OP Original Poster

Original Poster

    Systems Developer

  • Tech Issues Solved: 1
  • Joined: 15-July 08
  • Location: my room
  • OS: windows 7/8, Kali, ubuntu, OSx 10.9
  • Phone: Android

Posted 22 May 2014 - 09:46

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 



#7 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 22
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 22 May 2014 - 18:04

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?



#8 +Zlip792

Zlip792

    Neowinian Senior

  • Tech Issues Solved: 10
  • Joined: 31-October 10
  • Location: Pakistan
  • OS: Windows 8.1 Pro 64-bit
  • Phone: Nokia C3-00 (8.70 firmware) It sucks!!!

Posted 22 May 2014 - 22:57

Tried giving background-size rather than auto?

Put image resolution in it and try...

 

meta viewport tried?



#9 Crimson Rain

Crimson Rain

    Neowinian

  • Joined: 29-September 12
  • OS: Windows 8.1 x64
  • Phone: Lumia 1020 Yellow

Posted 23 May 2014 - 01:51

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.



#10 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 22
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 23 May 2014 - 07:07

Yeah auto might be the problem,

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



#11 Crimson Rain

Crimson Rain

    Neowinian

  • Joined: 29-September 12
  • OS: Windows 8.1 x64
  • Phone: Lumia 1020 Yellow

Posted 23 May 2014 - 08:30

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.



#12 The_Decryptor

The_Decryptor

    STEAL THE DECLARATION OF INDEPENDENCE

  • Tech Issues Solved: 4
  • Joined: 28-September 02
  • Location: Sol System
  • OS: iSymbian 9.2 SP24.8 Mars Bar

Posted 23 May 2014 - 10:45

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.

#13 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 22
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 24 May 2014 - 18:55

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



#14 Crimson Rain

Crimson Rain

    Neowinian

  • Joined: 29-September 12
  • OS: Windows 8.1 x64
  • Phone: Lumia 1020 Yellow

Posted 25 May 2014 - 00:43

So only method is a onscroll js element O.o

 

What the heck is wrong with apple >.>

They are busy with apps ;)



#15 The_Decryptor

The_Decryptor

    STEAL THE DECLARATION OF INDEPENDENCE

  • Tech Issues Solved: 4
  • Joined: 28-September 02
  • Location: Sol System
  • OS: iSymbian 9.2 SP24.8 Mars Bar

Posted 25 May 2014 - 03:16

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)