CODEWITHSUNDEEP
htmlcsssafari
Leigh Scherrer
Leigh Scherrer

Reputation: 153

Safari "Shadow Content (User Agent)" causing input contents to be cut off

I'm running into an issue in desktop Safari (haven't checked mobile) where the top part of an input element's content is being cut off. There is no padding on the parent element and the styles render correctly in other browsers.

enter image description here

I believe the issue is due to a shadow div element that Safari has added that is the direct child of the input, as the calculated style for this shadow div has font-size 12px, while the actual size of the font specified on the input is 16px. When I type, the cursor has height 12px.

enter image description here

I'm not able to target the shadow div to overwrite the font-size. Any styles I try to apply are ignored. Any idea what this shadow element uses to calculate its styles, or how I can target would be greatly appreciated. Thanks!!

Upvotes: 6

Views: 6517

Answers (1)

Leigh Scherrer
Leigh Scherrer

Reputation: 153

UPDATE: Happily, a simple solution. Applying a line-height to the input element solved the issue.

Interestingly, on both my branch with this bug and another branch without it, the value returned by getComputedStyle() for lineHeight was the same: 'normal'. I suppose it helps to be explicit with CSS. Hope this helps someone else.

Upvotes: 4

Related Questions