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