Chrome users may encounter difficulty grabbing the horizontal textarea scrollbar if a border-radius has been applied

Question

Chrome users may encounter difficulty grabbing the horizontal textarea scrollbar if a border-radius has been applied

Check out this JSFiddle for more information

<textarea wrap="off" rows="5" style="border-radius: 4px">aaaaaaaaaaa
  aaaaaaaaaaa
  aaaaaaaaaaa
  aaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbb
  aaaaaaaaaaa
  aaaaaaaaaaa
  aaaaaaaaaaa
  aaaaaaaaaaa
  aaaaaaaaaaa
  aaaaaaaaaaabbbbbbbbb
  aaaaaaaaaaabbbbbbbbb
  aaaaaaaaaaabbbbbbbbb
</textarea>

Scroll to the middle of the text box
Attempt to grab the horizontal scrollbar with your mouse
You'll notice that you can't, due to the blinking text cursor behind it!

If you remove the border-radius style and retry, you will find that you are able to grab the horizontal scrollbar. It also begins functioning once you scroll to the very bottom.

This functionality works smoothly in Firefox. I opted to use the wrap attribute instead of CSS as it is the most compatible method across browsers, including IE11 (source: HTML Textarea horizontal scroll). Using CSS caused an issue in IE11 where pressing the return key produced a space instead of a new line.

Does anyone know how to resolve this issue in Chrome?

Edit: Bug has been resolved in Chrome version 52

html css google-chrome

Answer 1

Answer №1

Fixing the scrollbar issue can be achieved by adding position:relative; as mentioned in my previous comment.

Alternatively, you may want to experiment with setting border to none and using box-shadow for a similar effect.

In this fiddle, you can explore three different options: https://jsfiddle.net/p6jw6qvf/

#one{
    border: none;
    box-shadow: 0 0 5px 2px #9a9a9a;
}

#two{
    position: relative;
    border-radius: 4px;
}

Keep in mind that if you choose option #two, the scrollbars will overlap the border. To address this, consider using custom scrollbars with border-radius applied to them.

https://i.sstatic.net/ChFOt.jpg

Answer 2

Fixing the scrollbar issue can be achieved by adding position:relative; as mentioned in my previous comment.

Alternatively, you may want to experiment with setting border to none and using box-shadow for a similar effect.

In this fiddle, you can explore three different options: https://jsfiddle.net/p6jw6qvf/

#one{
    border: none;
    box-shadow: 0 0 5px 2px #9a9a9a;
}

#two{
    position: relative;
    border-radius: 4px;
}

Keep in mind that if you choose option #two, the scrollbars will overlap the border. To address this, consider using custom scrollbars with border-radius applied to them.

https://i.sstatic.net/ChFOt.jpg

Answer 3

Answer №2

• OPTION 1:

In the past, I encountered a similar issue and devised a makeshift solution that may not be the most elegant, but it gets the job done for me.

To address the problem, start by enclosing your textarea within a div element with the following properties:

div {
    border: 1px solid rgb(169,169,169);
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
}

Next, remove the border from the textarea and apply vertical-align: top to eliminate any unwanted spacing caused by elements with display: inline-block:

textarea {
    vertical-align: top;
    border: 0;
}

This approach may not be considered professional or reliable, but visually matches the appearance of the textarea in your code snippet. Exercise caution when implementing this method as it could behave unexpectedly in certain scenarios.

Example: → here.

Snippet:

div {
  border: 1px solid rgb(169, 169, 169);
  border-radius: 4px;
  overflow: none;
  display: inline-block;
}

textarea {
  vertical-align: top;
  overflow-x: visible;
  border: 0;
}

<div>
  <textarea wrap="off" rows="5">aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbb
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaabbbbbbbbb
    IT'S 2016 AND I CANT EVEN HAVE A HORIZONTAL SCROLLBAR ON A TEXTBOX.
  </textarea>
</div>

• OPTION 2:

Through testing, I discovered that applying position: relative to the textarea seems to resolve the issue, at least in my Chrome version. However, if you prefer an alternative positioning method, the above solution should suffice.

Answer 4

• OPTION 1:

In the past, I encountered a similar issue and devised a makeshift solution that may not be the most elegant, but it gets the job done for me.

To address the problem, start by enclosing your textarea within a div element with the following properties:

div {
    border: 1px solid rgb(169,169,169);
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
}

Next, remove the border from the textarea and apply vertical-align: top to eliminate any unwanted spacing caused by elements with display: inline-block:

textarea {
    vertical-align: top;
    border: 0;
}

This approach may not be considered professional or reliable, but visually matches the appearance of the textarea in your code snippet. Exercise caution when implementing this method as it could behave unexpectedly in certain scenarios.

Example: → here.

Snippet:

div {
  border: 1px solid rgb(169, 169, 169);
  border-radius: 4px;
  overflow: none;
  display: inline-block;
}

textarea {
  vertical-align: top;
  overflow-x: visible;
  border: 0;
}

<div>
  <textarea wrap="off" rows="5">aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbb
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaabbbbbbbbb
    IT'S 2016 AND I CANT EVEN HAVE A HORIZONTAL SCROLLBAR ON A TEXTBOX.
  </textarea>
</div>

• OPTION 2:

Through testing, I discovered that applying position: relative to the textarea seems to resolve the issue, at least in my Chrome version. However, if you prefer an alternative positioning method, the above solution should suffice.

Chrome users may encounter difficulty grabbing the horizontal textarea scrollbar if a border-radius has been applied

Answer №1

Answer №2

Similar questions

Applying the jqtransform plugin to all forms except for one

Having trouble with the input range slider on Chrome? No worries, it's working perfectly fine

Conceal table rows with JQuery in html

What could be causing the discrepancy in results between the first and second methods?

jmpress: Scrolling through Absolutely Positioned Element (Slide) with dynamic height

Is it possible to substitute the input field in the filter component with a Material UI text field instead?

Seamless transition of lightbox fading in and out

The issue with Internet Explorer failing to adhere to the restrictions set on maximum width and

The Bootsrap 5.3 navbar is not fully extending to the width of the page

How can you customize the color of the arrows in Carousel Bootstrap?

PNG file unable to display in Google Chrome

Align the content at the center within a Bulma column

Tips for organizing the outcome of a seamless web scraping operation with Apify and Puppeteer

Add a new division to a component when a specific event handler is triggered by another component using React and the reduce method

Creating triangular shapes that can be interacted with by hovering

The issue with clip-path not functioning correctly in Safari persists

Disabling the @import cache feature in LessCSS Assetic

Tips for rearranging a span following an image?

Guide on incorporating a dropdown menu within a Jssor slider

Utilizing PHP loops to dynamically generate Bootstrap rows with specific column configurations for elements