I have a card element that can be dragged from one column to another column. This works, except the card has a transparent dropzone element inside it that becomes opaque on Chrome browsers when dragging. This problem is not the case on Firefox or Safari.

You can see the code here. How can I fix this problem on Chrome browsers? I tried by playing with opacity and rgb() in css, but with no success. See the code below.

#board {
    display: flex;
    padding: 8px;
    width: 800px;
}

#board * {
    font-family: sans-serif;
}

.board__column {
    flex: 1;
    background: #fcb51d;
    padding: 10px;
    border-radius: 5px;
}

.board__column:not(:last-child) {
    margin-right: 10px;
}

.board__column-title {
    margin-bottom: 20px;
    font-size: 30px;
    color: white;
    user-select: none;
}

.board__item-card {
    box-sizing: border-box;
    cursor: pointer;
  background: white;
  padding: 8px;
  border-radius: 8px;
}

.board__item-input {
    background: white;
    padding: 10px 15px;
    border-radius: 5px;
}

.board__dropzone {
    height: 10px;
    transition: background 0.15s, height 0.15s;
}

.board__dropzone--active {
    height: 20px;
    background: rgba(0, 0, 0, 0.25);
}

.board__add-item {
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    color: white;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

<div id="board">
            <!-- Todo's tasks -->
            <div >
              <div >Todo</div>
              <div >
          <div  draggable="true">
            <div >
              My first todo task