Increasing the background-size in CSS makes the background image disappear

Question

this is what I have:

.slot {
  border: 1px solid;
  border-color: rgba(90, 90, 90, 1);
  height: 31px;
  background: url(https://i.imgur.com/r6ihXJe.png), rgba(150, 150, 150, 1);
  background-position-x: center !important;
  background-repeat: repeat-y, no-repeat !important;
}

<div class="slot" style="width:345px; background-size: 62px, auto;"></div>

This is the result:

slot with bg image

Now the issue comes when the background-size property changes to more than 62px. For example when it becomes 63px and more - the background image disappears:

slot with no bg image

Interesting that if we increase the height of the div then we can have a bigger background-size and still see the background image.

Here is a jsFiddle I made: https://jsfiddle.net/avc4y3h0/

Please help!

Edit: It seems that I can reproduce this issue only on Google Chrome, Avast Browser and Opera. It works fine on Mozilla Firefox and Microsoft Edge. Can not check on Safari. Also I have the feeling that this was working before on Chrome and it is probably something recent? But I can't tell for sure.

Answer 1

Solution #1: (Thanks to the comment of Temani Afif)

Should use 100% instead of auto in the background-size property for value of y:

background-size: 63px 100%;

Solution #2:

I came up to this idea thanks to vishwaovi answer.

We can use a background image that is a line of 1 x 31 pixels (or other fixed height) instead of just single pixel.

Then we can set the background-size with fixed height for the y:

background-size: 63px 31px;

And the background-repeat property needs to be set to no-repeat:

background-repeat: no-repeat;

This one works too for me but obviously the first solution with just setting the value for y to 100% is more simple.