Adjustment on iOS-Devices not correct

ios

(Georg Isert) #1

On all devices, whether Desktop, Tablet or Smartphone, is the adjustment correct. Only on iOS not. What can I do against it? See the attachement projectfile. Thanks.


ForumInputText.zip (25.6 KB)


#2

This looks like the minute difference between how browsers determine what to do with the ‘auto’ property on line-height. This might help:

If you set the line height explicitly in the Typography inspector this will likely fix your issue.


(Georg Isert) #3

Doesn’t work. Please look in the project and try it yourself. Consider please: it concerns browsers on a iOS device. You can see the behavior under: https://www.igmw.com/tumulthype/index.html
Please use a iOS-Device for testing :wink:


#4

The code within that input field is custom code, not controlled by Hype, but likely inserted within the inner HTML of a rectangle. It is this:

<input type="text" id="StatusER_txt" onclick="SelectAll('StatusER_txt');" value="01 item" size="14" style="
text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 18px;
    font-family: Abel;
    font-weight: bold;
    background-color: #FAFAFA;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 0px solid #D8DDE4;">

If you add line-height:1; (which will multiple the font-size by 1) your line-height will become 18px. This will likely standardize the line-height across all browsers.

Forms are notorious in how different browser treat them. This is also why there are so many ‘reset’ CSS libraries, which aim to standardize browser quirks. Here’s a popular one: http://cssreset.com/scripts/eric-meyer-reset-css/

Adding that reset CSS to the head of your document might also help out.

A bit more background:

I used Safari developer tools (while connected to my iPhone) to see what the line-height being computed was for that:

Line height for that element magically became ‘24px’ because the line-height had not been set, and 24px seemed right because the height of the parent element for the input is 24px. That’s Safari for ya.


(Georg Isert) #5

Sorry, unfortunately always still the same.
I add in the innerHTML the line-height:1;
ForumInputText.zip (26.5 KB)

https://www.igmw.com/tumulthype/index.html


(Mark Hunte) #6

Not found a fix yet but to me the problem looks like the font-size.
Setting it to 18 corrects the alignment for iOS but the font it will then be too small for Desktop Safari