Jump to content

.London Domains - £4
Photo

CSS transitions not working on iPhone and Android, and some strange text ghosting...

css iphone android windowsphone mobile safari transition

  • Please log in to reply
9 replies to this topic

#1 corbey94

corbey94
  • Member
  • Newbie
  • 4 posts

Posted 25 April 2013 - 08:15

Hi all, this is my first post.

 

I'm developing a mobile website for our company, you can see the current status here: http://www.onlyrugge...bile/index.html  (the capital M is necessary). When viewed on the desktop, although the layout is incorrect, the top 6 group of buttons labeled print, mobile, etc. have transitions and :active states so that they function like a button, however when viewed on Android or iPhone (any browsers, so i can say any mobile Webkit browser) the buttons do not work, they simply function as links. However, when tested on my Windows Phone 8X the transitions, while jerky, work fine. I've specified the -webkit and -moz prefixes so i can't seem to figure out the problem?

 

Another issue i'm having is that on the headers further down the page labelled 'Our industries' and 'news' the text appears to be duplicated or ghosted, which disappears when zoomed in. Has anyone else experienced this, or could have a quick look at my CSS to see what might be causing this?

 

Thankyou

 
 

  • 0

http://www.renovotec.com is our main site, http://www.onlyrugged.com is our ecommerce site. Visit us!


#2 Frankchester

Frankchester
  • Hefty Member
  • Advanced Member
  • 794 posts

Posted 25 April 2013 - 09:30

Hi all, this is my first post.

 

I'm developing a mobile website for our company, you can see the current status here: http://www.onlyrugge...bile/index.html  (the capital M is necessary). When viewed on the desktop, although the layout is incorrect, the top 6 group of buttons labeled print, mobile, etc. have transitions and :active states so that they function like a button, however when viewed on Android or iPhone (any browsers, so i can say any mobile Webkit browser) the buttons do not work, they simply function as links. However, when tested on my Windows Phone 8X the transitions, while jerky, work fine. I've specified the -webkit and -moz prefixes so i can't seem to figure out the problem?

 

Another issue i'm having is that on the headers further down the page labelled 'Our industries' and 'news' the text appears to be duplicated or ghosted, which disappears when zoomed in. Has anyone else experienced this, or could have a quick look at my CSS to see what might be causing this?

 

Thankyou

 

Unfortunately I'm not seeing any transitions on desktop or mobile...


  • 0

#3 DiederikEenschooten

DiederikEenschooten
  • Hefty Member
  • Advanced Member
  • 638 posts

Posted 25 April 2013 - 09:36

checked it. me neither


  • 0

#4 Inspired

Inspired
  • Supporter
  • Advanced Member
  • 680 posts

Posted 25 April 2013 - 09:40

You should have position: relative set on the initial element, not its :active state. Performance would be improved if you only transitioned the position, not all properties. 

 

Your footer is absolutely positioned, so it smashes through your text at the bottom of the page as it maintains it's position.


  • 0

Web designer, UX flavoured. Opinionated. Caffeinated.

 

Opining at @nternetinspired and standing my ground at http://internet-inspired.com. I also make the best responsive Joomla templates in town.

 

Joomla UX Team Leader.


#5 corbey94

corbey94
  • Member
  • Newbie
  • 4 posts

Posted 25 April 2013 - 09:49

:S even more odd... The button should depress when clicked, if you click and hold with the mouse then it should show it.. Screencaps here:

 

buttonunpressed.jpg

 

 

buttonpressed.jpg

 

 

Only a very basic animation and on my side, they work on Windows but no other OS...



You should have position: relative set on the initial element, not its :active state. Performance would be improved if you only transitioned the position, not all properties. 

 

Your footer is absolutely positioned, so it smashes through your text at the bottom of the page as it maintains it's position.

 

Thanks for that Inspired, i've reuploaded with the changed positions, can anyone confirm that it is working now? I'm still working on the footer as i'm not entirely sure how it's going to look anyway.



Scratch that - just tried on an iPhone and it still doesn't work. I have the entire div wrapped in a link, could this be the cause?


  • 0

http://www.renovotec.com is our main site, http://www.onlyrugged.com is our ecommerce site. Visit us!


#6 Inspired

Inspired
  • Supporter
  • Advanced Member
  • 680 posts

Posted 25 April 2013 - 10:07

I'm still seeing it as it was before. You have relative positioning set on the :active state, it should be on the default state. 

 

BTW, as you are doing the same thing on each element you should use a class instead of an ID for each button, so you aren't duplicating your CSS again and again and again. E.g.:

 

<div class="mobile button">

 

.button {

position: relative;

transition: ...

etc..

}

 

.button:active {

top: 7px;

}


  • 0

Web designer, UX flavoured. Opinionated. Caffeinated.

 

Opining at @nternetinspired and standing my ground at http://internet-inspired.com. I also make the best responsive Joomla templates in town.

 

Joomla UX Team Leader.


#7 corbey94

corbey94
  • Member
  • Newbie
  • 4 posts

Posted 25 April 2013 - 10:19

I think you might need to refresh the page, i've got it showing as positioned relative when using inspect element here. 

 

I see, so for <div class="mobile button"> i will only need to specify the different unique aspects such as colour in .mobile{}, and .button{} will control the elements which stay the same throughout the page? This is my first attempt at any web design/code at all so i'm more surprised that it works as well as it does than the problems that i'm having!


  • 0

http://www.renovotec.com is our main site, http://www.onlyrugged.com is our ecommerce site. Visit us!


#8 DiederikEenschooten

DiederikEenschooten
  • Hefty Member
  • Advanced Member
  • 638 posts

Posted 25 April 2013 - 10:53

still the same to me


  • 0

#9 Inspired

Inspired
  • Supporter
  • Advanced Member
  • 680 posts

Posted 25 April 2013 - 15:04

I think you might need to refresh the page, i've got it showing as positioned relative when using inspect element here. 

 

I see, so for <div class="mobile button"> i will only need to specify the different unique aspects such as colour in .mobile{}, and .button{} will control the elements which stay the same throughout the page? This is my first attempt at any web design/code at all so i'm more surprised that it works as well as it does than the problems that i'm having!

 

Exactly. Keep your code DRY (Don't Repeat Yourself). 

 

Really, you should also avoid using classes as they can give you major headaches with specificity. For your purposes there's no need to use IDs at all, and your life will be easier if you use classes instead. Classes don't have to be re-used, they can be unique also. 


  • 0

Web designer, UX flavoured. Opinionated. Caffeinated.

 

Opining at @nternetinspired and standing my ground at http://internet-inspired.com. I also make the best responsive Joomla templates in town.

 

Joomla UX Team Leader.


#10 corbey94

corbey94
  • Member
  • Newbie
  • 4 posts

Posted 26 April 2013 - 11:32

Thanks for the advice!

 

Any idea about the text ghosting on iOS devices? The only thought i had was that font size was being specified twice, but the font-size furthest down the css would overwrite the previous one wouldn't it?


  • 0

http://www.renovotec.com is our main site, http://www.onlyrugged.com is our ecommerce site. Visit us!






Also tagged with one or more of these keywords: css, iphone, android, windowsphone, mobile, safari, transition

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users