35 replies

.visually-hidden creating overflow /horizontal scrollbars on html element?

I have been debugging this for days and couldnt figure out wtf was going on; finally narrowed it down to the

position: absolute

position: absolute

position: absolute

position: absolute on my

.visually-hidden

.visually-hidden

.visually-hidden

.visually-hidden class?

Why on earth is this happening? i use this class all the time! and the same copy and paste class so its not like i just wrote it and ordered it differently or something , (did move position absolute to the top for easy discord access but usually its between

overflow: hidden

overflow: hidden

overflow: hidden

overflow: hidden and

whitespace: nowrap

whitespace: nowrap

whitespace: nowrap

whitespace: nowrap)
https://codepen.io/Miss-Fox/pen/VwoKNOM?editors=0100

EDIT: Also if i hardcode the products, it takes more than three of these before i start getting overflow ~ 800px screen width; curiouser and curiouser

<li class="color-item" style="--_item-color: #F17E9D">
    <button class="selected">
        <span class="visually-hidden">Rose Lipstick: #F17E9D</span>
    </button>
</li>

<li class="color-item" style="--_item-color: #F17E9D">
    <button class="selected">
        <span class="visually-hidden">Rose Lipstick: #F17E9D</span>
    </button>
</li>

<li class="color-item" style="--_item-color: #F17E9D">
    <button class="selected">
        <span class="visually-hidden">Rose Lipstick: #F17E9D</span>
    </button>
</li>

<li class="color-item" style="--_item-color: #F17E9D">
    <button class="selected">
        <span class="visually-hidden">Rose Lipstick: #F17E9D</span>
    </button>
</li>

CodePenCleverMissFox-GAcct

Discord - Product Scrollbars

...

.visually-hidden creating overflow /horizontal scrollbars on html element?

Similar Threads

Similar Threads

Similar Threads