CODEWITHSUNDEEP
ioscsshtmltwitter-bootstrap
Snake Eyes
Snake Eyes

Reputation: 16764

Bootstrap fonts seem to be striped on Safari iOS

I created a simple application which uses bootstrap version 3.3.5 and a button with a dropdown:

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

If you run that on Safari iOS, the down icon seems to be cut:

enter image description here

Is there a solution to this problem ?

Upvotes: 1

Views: 475

Answers (1)

Snake Eyes
Snake Eyes

Reputation: 16764

I found the problem, that was made by caret css class:

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid \9;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

The following line I modified, from:

  border-top: 4px dashed;

to

  border-top: 4px solid;

and it works fine.

Upvotes: 4

Related Questions