www.webdeveloper.com
Results 1 to 8 of 8

Thread: iPhone potential bug with line-height variable

  1. #1
    Join Date
    Jul 2009
    Posts
    17

    iPhone potential bug with line-height variable

    This is kind of involved, but here goes...

    First, I am coding in XHTML 1 Strict and using CSS.

    I have identified what I believe to be a bug with the iPhone's Safari browser. I spent many hours stripping away
    code line by individual line until I isolated the problems in both the CSS and the HTML. Here is the CSS that is causing
    the problem:

    #main li {
    line-height: 1.4em;
    }

    #main p {
    line-height: 1.3em;
    }

    Here is the Web page with the problem:

    www.stcmedical.com/demosite/products2.html

    The problem I am about to describe I have only run into with iPhone Safari browser. The code works with IE 6, 7 and 8,
    Firefox, Netscape, Chrome, and the desktop version of Safari. You will only be able to see what I am talking about on
    the iPhone browser. I tested this on the original iPhone with OS 3.0.

    When you visit www.stcmedical.com/demosite/products2.html you will see that the top line of text, which is enclosed within
    a <p> element, displays in a different font. The line height is difficult to judge because the text is only one line. In the
    block of text below the bulleted items, I have typed text that ends with the number "87". This is important for the next
    example...

    Now, visit www.stcmedical.com/demosite/products.html and you will now see that the font is as it should be. The number 86 in
    the last text block is now 87. The only difference in the entire HTML of the two files is that products.html has 87 characters
    of text in that last block, and that product2.html has 86 characters.

    Finally, visit www.stcmedical.com/demosite/products3.html. If that last line of text is eliminated (which is what I want)
    the text on the first line has its font shrunk to very small.

    So there are three scenarios: 1) If the last <p> text is not present, the first <p> element's font is very, very small. 2) If
    there are 86 characters of text entered in the added <p> element at the bottom, the font increases in size. 3) If there are 87
    characters of text in that last <p> element, the font is now correct.

    In a desktop browser, character 87 is what causes the line to break. Somehow, I think this is signifant. I don't know exactly
    why, but that's what I think.

    I verified all of this further by copying the index.html file's code from the text and bulleted areas by copying them into
    products.html. No problem.

    None of this is an issue if the above CSS block of code is eliminated. Either one or both of those entries together causes the
    problem.

    I realize I have spent a great deal of time on something rather esoteric, but since our sales force is entirely armed with
    iPhones, it has become an issue for us.

    Any help is greatly appreciated.

    Thank you,

    Greg

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    The problem is, probably, due to the fact that you have used the em measurement unit, which is relative either to the font-size or even to parent's font-size and the parent parent's font-size...

    Take for instance your element with a line-height of 1.4em. That means the element has line-height of 1.4 * the element's font-size. Now if the element's font-size is also set in em, that will make the line-height dependent on the elements' parent font-size, which is, also, dependent of his parent's font-size, and so on till the BODY. When you remove one of the parents, you change the font-size of all the child nodes and also their line-height, and so on.

    em is to be used mainly for the font-size, it is a measurement unit related with the fonts, and nothing else. I guess you should use pixels, not ems, in case you have not a common parent for all the elements. Or you must elaborate intricate calculations to bring the elements at the same apparently for eye font-size. Working with relative measurement units like em could be flexible, but it is a tricky mission when you don't know how to manage it properly
    Last edited by Kor; 07-22-2009 at 05:12 AM.

  3. #3
    Join Date
    Jul 2009
    Posts
    17
    That completely solved my problem! I changed the values from 1.4em to a simple 1.4 and voila, it works!

    I wonder why this problem is only evident on the iPhone, at least out of the half dozen or so desktop browsers I tested?

    Thank you so much!

    Greg

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Well, this is a kind of solve. For W3C compliant browsers like FF, Opera, Chrome, Safari a CSS size/position value without a certain measurement unit means nothing. Solely IE will presume that 1.4 means 1.4px (pixels), which is also a sort of nonsense, as a browser's interpretor works only with integer values of pixels. But to set the line-height value to a so small value (1 or 2 px) is useless, except for IE6, for which a non line-height block element should have, by default, a value of 8px (the smallest font-size height).
    Last edited by Kor; 07-22-2009 at 02:11 PM.

  5. #5
    Join Date
    Jul 2009
    Posts
    17
    Quote Originally Posted by Kor View Post
    Well, this is a kind of solve. For W3C compliant browsers like FF, Opera, Chrome, Safari a CSS size/position value without a certain measurement unit means nothing. Solely IE will presume that 1.4 means 1.4px (pixels), which is also a sort of nonsense, as a browser's interpretor works only with integer values of pixels. But to set the line-height value to a so small value (1 or 2 px) is useless, except for IE6, for which a non line-height block element should have, by default, a value of 8px (the smallest font-size height).
    I have tested my code in FF, IE (7 & 8), Chrome and Sarari. They are all honoring the 1.4 value. All I did was remove the em and it fixed my iPhone Sarari problem, and remained unchanged in the desktop browsers. I tested the value at 1 and with nothing at all, and all of the lines collapsed to the default. So the question is: what does 1.4 by itself mean to FF, Chrome, Safari, et al.?

    What can I enter to make all of the browsers happy and fully compliant?

    Thank you,

    Greg

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428

  7. #7
    Join Date
    Jul 2009
    Posts
    17
    Quote Originally Posted by Kor View Post
    what about '1px' ?
    I haven't uploaded it to the live site, but I tried 24px and that seems to be the rough equivalent of 1.4 all by itself. I took you literally and entered 1px, and of course, all of the text collapsed on itself, which was kind of cool to see.

    Thanks,

    Greg

  8. #8
    Join Date
    Jul 2009
    Posts
    17
    Quote Originally Posted by Kor View Post
    what about '1px' ?
    Well, maybe you'll find this interesting. Switching the value from the plain 1.4 to 22px worked on all browsers except... The iPhone Safari browser.

    So I had to go back to 1.4.

    This is confusing stuff...

    Greg

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles