title: Input placeholder spacing on mobile safari
body: <p><strong>UPDATE: Here's a link to a <a href="https://github.com/samcorcos/mobile-safari-bug" rel="nofollow noreferrer">minimum reproducible bug</a>. Instructions for running it are in the readme</strong></p>
  
  <p>I'm having issues with the bottom padding below an input placeholder on mobile safari. Here's what the input placeholder looks like on mobile safari:</p>
  
  <p><a href="https://i.stack.imgur.com/xbJqL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xbJqL.png" alt="enter image description here"></a></p>
  
  <p>Here's what the input placeholder looks like on Chrome:</p>
  
  <p><a href="https://i.stack.imgur.com/NVudq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NVudq.png" alt="enter image description here"></a></p>
  
  <p>As you can see there's a significant difference in the space between the placeholder text and the bottom border.</p>
  
  <p>I've tried changing <code>line-height</code> as suggested by a few other stackoverflow answers and I've tried changing <code>padding-bottom</code> on the <code>::placeholder</code> with appropriate vendor prefixes... I'm not sure what else there is to try.</p>