Safari textarea resize handle broken with padding?

Question

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>

Bone

Can confirm this. Have you found an answer to your question? – Cavallaro

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... – Fledgling

Answer 1

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.

Stenograph