iOS zooming issue - detected on iOS 5 and 6

till / 2012-09-24 21:52:41   

Both on iphone and ipad i detected that most websites i saw built with indexhibit dont act as one website when zooming.
the problem is that the navigationbar (index) seems to gets bigger seperate from the content (exhibit) but still keeps its position on the left.
on iphone you can not even see content anymore because of this issue.

maybe you guys have some advise or workaround?
maybe the developers are already aware of this problem and try to fix this?

best,
till

till / 2012-09-25 20:25:10   

even on this site! indexhibit.org

rlopezortiz / 2012-09-26 01:46:42   

Yes any help on this would be great. Is there a way to maybe just lock the nav bar or something?

jonathangrevsen / 2012-09-26 09:28:23   

Maybe try this html {-webkit-text-size-adjust:none}

linuesa / 2012-09-26 13:16:44   

jonathangrevsen, in what file we put this code?

  1.  {-webkit-text-size-adjust:none}

What I see in my web from my iPhone is that the text of the projects in the Exhibit is much bigger than a normal web version (the size of the text index is correct) ... This code is for fix this?

Thanks!

jonathangrevsen / 2012-09-26 14:39:16   

Add: html {-webkit-text-size-adjust:none}
* {
To the top of the style.css - I used this code to legacy version and fixed the IOS auto text ajustments.

Vaska A / 2012-09-26 14:41:05   

Thanks for the tip...I'll look into this...

linuesa / 2012-09-26 19:24:45   

Wowww!! That's perfect.
The code that works for me it's this:

  1. html
  2. {
  3.     -webkit-text-size-adjust: none;
  4. }

This at the top of the style.css
Cheers!

linuesa / 2012-09-26 19:38:21   

Sorry... but it's not so perfect...

Read this thread:
456bereastreet.com/archive/201011/beware_of_-webkit-text-size-adjustnone/

When I use Safari or Chrome and I want to resize de page (Cmd and + or -) the text doesn't resize.... For Firefox 15.0.1 works well.

jonathangrevsen / 2012-09-26 20:18:30   

Hmm.. Too bad. I am keeping this solution for now. Maybe another value like percentage could work for you?

jonathangrevsen / 2012-09-26 20:25:24   

It seems to be a bug, since this should only affect mobile browser. Look at the bottom of the page

developer.mozilla.org/en-US/docs/CSS/…

jonathangrevsen / 2012-09-26 20:47:04   

Try setting the value to 100% instead of none. This will enable the posibility to zoom in and out on desktop browsers and keep the text normal size on mobile browser

linuesa / 2012-09-26 21:23:11   

The code it's this?:

  1. html
  2. {
  3.     -webkit-text-size-adjust: <100>;
  4. }

Doesn't work well for me but maybe it's because I'm doing the test with a Pleistocene Iphone 3 :P

jonathangrevsen / 2012-09-27 08:07:56   

no. Like this: html {-webkit-text-size-adjust:100%}
* {

linuesa / 2012-09-27 09:51:40   

Wowww!!!! Niceeee!
It's perfectly on iOS and on desktop browsers!! No bugs.
Thanks you!!!!

jonathangrevsen / 2012-09-27 10:17:37   

Great... happy to be of help!

jonathangrevsen / 2012-09-27 10:18:12   

You should post a link to your page, so we can see what you are building..

till / 2012-09-27 11:15:36   

Yes, a link would be perfect. because i'm trying indexhibit on localhost by now. A working example would be great.
thanks for your support so far!

jonathangrevsen / 2012-09-27 12:10:42   

my page is jonathangrevsen (dot) dk . Here this css rule is added. It is legacy, but same result.

till / 2012-09-27 12:39:56   

jonathan,

on my device (iphone 3gs, ios6) it does not work either.

the top and bottom bars are still overlapping the content.
further the top right and top left text in the top bar are overlapping when zooming in too.

jonathangrevsen / 2012-09-27 15:59:47   

Yes, but this is another problem. What that css rule does is to make sure, that iOS dosnĀ“t make the text bigger.

till / 2012-09-27 16:42:01   

alright.

i think the textsize increasement wouldn't be a problem if the site acts as one unit when zooming in on ios devices.

jonathangrevsen / 2012-09-27 17:11:25   

Sounds correct to me. I dont really know.

till / 2012-09-27 17:36:54   

but right now the navigationbar hides the content, the exhibits when you zoom in on the iphone

linuesa / 2012-09-28 11:18:57   

This is my site:
linuesa.net/
It's under construction but the about text have a perfect size on iOS (Iphone 3) and on Safari /Chorme desktop browsers I can resize the text with Cmd + or -.

if you visit the site with iphone4, 4s or Ipad, I appreciate you tell me if you see it right.

Thanks.

PD: jonathangrevsen I really like your work. Specially the "society" series. Them remember me this work of one spanish photograph:
txemasalvans.com/cas/…
Cheers!

jonathangrevsen / 2012-09-28 12:08:25   

Thank you Linuesa. I know this photographer. I visted your site on an Iphone 4s with iOS 5. It looks good and the text looks normal. But of course what happens is what till is talking about: when you zoom in the main content hides behind the menu/index. Someone with coding skill, like Vaska or Arsondi, should look at if they have time. But the site looks good besides this.

till / 2012-10-10 15:39:00   

hey! Is there any disadvantage changing

position: fixed to position: absolute

for #index in base.css??

cause on iphone it works with position: absolute.

till / 2012-10-10 20:09:19   

hello again, i tested jonathangrevsen's idea for the text size and it appears to me that the basic result is good.

one problem i had when applying html {-webkit-text-size-adjust:100%}
* {
to the style.css was, that all breaks i set were not showing up. so i couldnt leave one line empty.

^like this.
best, till

monkey4k / 2013-10-23 12:01:04   

the
html {-webkit-text-size-adjust:100%}
doesnt work for me ?!?!

i dont know why but we need a solution here !

till / 2013-12-01 13:33:06   

problem is persisting on ios7. plus there's a black line seperating navigation and content....

arsondpi / 2013-12-01 22:39:15   

@till
There are a few threads around about an Indexhibit responsive design - Vaska is working on things and apparently would like to hear about ideas: indexhibit.org/forum/thread/20219/

As for the ios7 in a previous thread I posted this: indexhibit.org/forum/thread/20173/
and in the same thread I posted an answer that I don't know if it works:
indexhibit.org/forum/thread/20173/

kactapuss / 2014-02-04 03:41:41   

@Vaska, Indexhibit team,
I am also experiencing this problem on my site simple-basic (dot) com and am awaiting an (easy) solution.

@Linuesa - On iPhone 5s with iOS 7.0.4 your site has the zoom problem. Zooms only onto the navigation and you can not scroll away from it. Black line between the nav and content.

@arsondpi - I will leave my comments in the threads you have listed.

@jonathangrevsen - Your site works well on iOS 7! Bravo. I will experiment with your solution until a more formal solution is released.

kactapuss / 2014-04-03 01:44:18   

Hello All,

I have resolved this issue (with help of my friend Benjamin English benjaminenglish[dot]com) with some CSS changes gleaned from css-tricks.com/snippets/css/media-queries-for-standard-devices/

Basically it changes the positioning of the index based on screen sizes of the devices accessing it.

check out my site www[dot]simple-basic[dot]com which now works quite nicely on ipads, iphones, big and small screens. Hoping others have success with similar solutions.

Vaska A / 2014-04-03 08:21:08   

I'll have a look, thanks.

I'm closing this thread because ti's become really long.

We are working on a proper mobile solution, including responsive, right now.

This thread has been closed, thank you.