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!!