CODEWITHSUNDEEP
htmlcssfontssafari
Brandon Durham
Brandon Durham

Reputation: 7717

Why is Safari cutting off the top of this text?

First, a screenshot.

enter image description here

… and then with the element selected in the inspector to show boundaries:

enter image description here

The div surrounding this text wraps it tightly, and the text has a line-height of 1em. The end product renders a div with the ascenders of the text cut off in Safari only. I can find no reason in the compiled CSS for this to happen. Desperately adding all of the usual CSS hack suspects (transform-style, translate3d, backface-visibility) yields no change.

Why the hell might (only) Safari be cutting scalping this text?

Upvotes: 1

Views: 1718

Answers (1)

Brandon Durham
Brandon Durham

Reputation: 7717

So, it turns out that the offending property was… (drumroll)…

↓

↓

↓

↓

↓

↓

will-change: opacity;

Changing it to will-change: unset; did the trick and my text is back to its pre-scalped beauty.

Upvotes: 1

Related Questions