6

This code works fine in Chrome and Firefox. But in Safari, the drag handle won't work if there is padding beyond 11px.

Is this a bug in Safari, or is there something silly I'm missing?

<style>
textarea {
  padding: 11px 16px;
}
</style>

<textarea>Stuff goes here. Does my drag handle work?</textarea>
doubleforte
  • 103
  • 3
  • Can confirm this. Have you found an answer to your question? – Johannes Stricker Jul 05 '22 at 07:00
  • That is crazy... Freaking Safari...got the same issue. If I set padding: 12px or below it works. If 13px and above - it fails! I've played around reseting styles, setting only single padding i.e. padding-left, changing fonts, lineheight etc - nothing helps. Rarely I was able to drag on 14px padding. So it seems, that ANY padding >=13px on Safari somehow shrinks the active drag zone of bottom right corner - so there's possibly only 1 or 4 pixels that are "active" and you just can't click right on them to actually resize. But that small zone exists because you actually can very rarely drag it... – Alex D Jun 27 '23 at 11:08

1 Answers1

0

I ran into the same problem yesterday, and have unfortunately not been able to find a direct solution to this problem.

As an alternative, you can ditch the resize handle entirely, and look into making your text area auto-resizable. Personally, I feel like this makes for a better design anyways. You completely avoid the problems of the resize handle, and your users get the additional space they need for their text, without having to mess around with a tiny handle themselves.

This post has some good examples on how this can be achieved.

phaz
  • 872
  • 9
  • 23