Question: Curved edges on Chrome not appearing with overflow

Question

Curved edges on Chrome not appearing with overflow

Answers 1
Added at 2016-12-28 17:12
Tags
Question

I have set my list's border-radius to 6px which works fine in all browsers but in Chrome, the top-right and bottom-right curved edges are hidden when there is overflow set. Is this just the way Chrome renders it? If not, how can I fix this?

My code:

<div class="container">
  <div class="list">
    <div class="list-item">
      Test 1
    </div>
    <div class="list-item">
      Test 2
    </div>
  </div>
</div>

JSFiddle Demo

Answers to

Curved edges on Chrome not appearing with overflow

nr: #1 dodano: 2016-12-28 18:12

Possibly a bug in Chrome. One workaround is to customise the scrollbar, using the ::-webkit-scrollbar prefixes. This prefix is ignored in firefox, which will render your scrollbar as the default with the radius intact.

FIDDLE

Example:

  .container {
    width: 300px;
  }
  
  .list {
    overflow-x: hidden;
    position: relative;
    height: 300px;
    border: 1px solid #000;
    border-radius: 6px;
  }
  
  .list-item {
    padding: 13px 0 7px;
  }
  
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 6px;
  }
<div class="container">
  <div class="list">
    <div class="list-item">
      Test 1
    </div>
    <div class="list-item">
      Test 2
    </div>
    <div class="list-item">
      Test 3
    </div>
    <div class="list-item">
      Test 4
    </div>
    <div class="list-item">
      Test 5
    </div>
    <div class="list-item">
      Test 6
    </div>
    <div class="list-item">
      Test 7
    </div>
    <div class="list-item">
      Test 8
    </div>
  </div>
</div>

Source Show
◀ Wstecz