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

user_4243405 0
Viewed 2295

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

safari css html
1 Answers

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.

user_42434050
Related