CODEWITHSUNDEEP
csssafarimobile-safari
Kyle Corbin Hurst
Kyle Corbin Hurst

Reputation: 1121

text breaks through border on safari

I'm trying to make an indicator to scroll on a modal, but the text is breaking through the borders on Safari, and from I can see all versions.

<div class='d-flex justify-center  mb-0 pb-0 overlay' style="width: 100%;">
  <span>Scroll down</span> <v-icon>keyboard_arrow_down</v-icon>
</div>

Here's what it looks like on Safari:

enter image description here

Here's the codepen

Upvotes: 1

Views: 145

Answers (1)

maco
maco

Reputation: 196

It seems that Safari isn't taking the line height into account, but I don't know why (though I do see lots of line-height bug complaints about Safari when I Google it).

In any case setting:

min-height: 1.5em

on this element:

<div class="d-flex justify-center mb-0 pb-0 overlay" style="width: 100%;">

(because the line-height on the text inside is 1.5em) should make it look right.

Upvotes: 1

Related Questions