CSS3 Strange bahaviour border Safari iOS and iPad - html

Question

I have a very strange problem rendering on iOS Browser Safari (not Safari Desktop, not Chrome Desktop and not Chrome Mobile).
I have some divs, which are draggables by the user. When the use make a "preview" of the content, in iOS Safari Mobile the text is "wrapper" because it not has enough space to paint it, something like this:
Lorem Ipsum Text
Lorem Ipsum <- problem break line not enough space by the border.
Text
The divs:
<div class="text-perfect-correction" style="opacity: 1; font-family: Lato; left: 594px; top: 386px; font-size: 50px; color: rgb(0, 0, 0); width: 472px; height: 103px; position: absolute; display: block;">
<div style="display:inherit;" class="text-div" spellcheck="false">
<p>
<span style="color:#696969"><strong>Lorem ipsum text</strong></span>
</p>
</div>
</div>
The css classes are like this:
.text-perfect-correction {
border-width: 6px;
border-color: transparent;
border-style: dotted;
padding: 5px;
margin: -11px;
}
.text-div {
-webkit-line-break: after-white-space;
display: inline;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
I use the perfect-correction-class because I show some buttons when you click div and a border to show the user which div is selected.
In all the other browsers, I see all correctly:
Lorem impsum text
Lorem impsum text <- No break line
Are any issue about it?
Thanks!!

Answer 1

The problem is not iOS-specific - it's that you're making risky assumptions.
First, let's look at what you've done:
Give the parent element an exact with of 472px
Set font size to 50px
Set font-family to Lato
Assume that your text will always fit on one line with these measuremenets
The problem is that different rendering engines won't always render fonts identically, there might be slight differences, e.g. resulting in a few pixels more width on iOS. Pushing font size to the limit in one browser and just assuming that everything will look ok in others is quite dangerous.
On top of that, there might have been issues with loading Lato making the browser fall back to a different font, which might use more horizontal space.
I copied your code into a JSFiddle, and because Lato isn't imported (and not on my computer), it will render in default sans-serif. In Chrome, the text fits into one line, but on Firefox it breaks after ipsum, too.
Solutions
There are a few approaches to make sure your text will remain on one line.
Prevent line breaks
You can use CSS to prevent white spaces from wrapping, meaning that the whole text will be forced to one line:
.text-div {
white-space: nowrap;
}
JSFiddle
Ellipsis
In addition to above, you can cut off overflowing text with an ellipsis (...):
.text-div p span strong {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
JSFiddle
Make text smaller
Of course, you can also just reduce font size, so you have enough error margin to prevent problems with slight differences in rendering.

Answer 2

Well I am aware that iOS is a hard browser to design for but from what I can tell your margins may be messing you up. class="text-perfect-correction" has left: 594px; and width: 472px;, and the font size is at 50px, so depending on what iPhone you are viewing it on, there may be a size/margin problem. Test it with less px. That is the problem that I personally have had the most with iOS.
idev101.com
iPhone Design tips