CSS3 Strange bahaviour border Safari iOS and iPad

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.