title: Safari "Shadow Content (User Agent)" causing input contents to be cut off
body: <p>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.</p>
  <p><a href="https://i.stack.imgur.com/CbNwt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CbNwt.png" alt="enter image description here" /></a></p>
  <p>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.</p>
  <p><a href="https://i.stack.imgur.com/ZJX04.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZJX04.png" alt="enter image description here" /></a></p>
  <p>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!!</p>