Absolute checkbox in overflow container breaks render when being checked

Question

I feel as though I'm being pranked. I'm running into an issue that is replica table in both Chrome and FireFox and I cannot understand why it's happening.

I have a "pseudo" checkbox setup I'm working on where the main container is position relative and overflow hidden. This is so the actual input/checkbox element can be "active" but not shown by applying position: absolute; right: -5000px.

(how it looks by default)

(how it is supposed to look after clicking on it)

-- Please excuse the crude look. Screenshots are taken from a codepen demo I setup (below) to illustrate the issue and not how my actual implementation looks.

This should work in theory, but the most bizarre thing is happening.

When you click the <label> element, the off screen checkbox input is checked via the label's for attribute. Using the css + operator I am stylizing the pseudo checkbox with a fake check style.

However, when this happens, the absolute position of the checkbox is broken. The box is all of the sudden displayed in the document flow and appears to be functioning more like relative than absolute positioning given that the negative right value is still being applied.

(How it looks when the break occurs)

The most insane part about this that I cannot understand is that going into dev tools and selecting the absolute position checkbox element, the CSS panel shows it's still absolute and even more insane is that if you simply uncheck the position property line, then re-check it - without touching a single other thing, the content is rendered correctly per expectation.

You can even emulate the "toggle fix" with JavaScript by changing the position value to static and then after a few ms timeout, set it back to absolute. That simple action forces the browser to correctly re-render the content.

I have setup a codepen that can repeat the issue on command. All you have to do is click the checkbox to select it for it to break. You can then click the fix button to emulate toggling absolute position on the checkbox element to see it magically fix the issue (You can also do this manually in the inspector as mentioned).

https://codepen.io/RickKukiela/pen/MYWmaLW

document.getElementById('fixme').addEventListener('click', () => {
  const input = document.querySelector('input');
  input.style.position = 'static';
  setTimeout(() => input.style.position = 'absolute', 10);
});

body {
  font-size: 100%;
  font-family: sans-serif;
}

.container {
  position: relative;
  overflow: hidden;
  background: #c00;
  color: white;
  padding: 1rem;
  border-radius: .5rem;
  max-width: 600px;
  margin-right: auto;
  margin-bottom: 1rem;

}

.fancy-toggle {
  display: flex;
  gap: 1rem;
}

label {
  display: flex;
  gap: 1rem;
}

input {
  position: absolute;
  right: -5000px;
}

.pseudo-checkbox {
  display: grid;
  place-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: white;
  border: 2px solid black;
}

input:checked+label .pseudo-checkbox .fake-check {
  color: black;
}

<main>
  <div class="container">
    <div class="fancy-toggle">
      <div class="row-icon">
        [ICON]
      </div>
      <input type="checkbox" id="checkbox" value="1">
      <label for="checkbox">
          <span>
            <span class="pseudo-checkbox">
              <span class="fake-check">X</span>
            </span>
          </span>
          <span class="pseudo-checkbox-label">Yes I would like this option</span>
        </label>
    </div>
  </div>
  <button id="fixme">Click Me to "Fix" the issue</button>

  <p>Clicking the &lt;label&gt; element checks the checkbox input due to the `for` designation.</p>
  <p>The checkbox is `display: absolute` and positioned way off screen when the page loads.</p>
  <p>When you click the label to check the box, the absolute position of the checkbox is broken is essentially treated as position: relative (as the `right: -5000px` is still applied).</p>
  <p>The result of this, due to overlow hidden on the parent container, is that all of the desireable content is pushed to the left off screen.</p>
  <p>What /SHOULD/ happen is the checkbox remains aboslutely positioned off-screen to the right, keeping the desired content in-place.</p>
  <p>Once causing the issue, you can press the fix button to force the position of the checkbox to `static`, and then 10ms later change it back to `absolute`. This simple action "Fixes" the issue. If you inspect the checkbox element before pressing the button, the borwser will show the position is absolute even though it's not being rendered as such.</p>
  <p>It makes no sense that simply removing and restoring the position value of the checkbox fixes the render.</p>
</main>

Can anyone explain what is happening? I feel like this is intended due to FireFox and Chrome behaving in the same manner, but I cannot figure it out.

I feel like I've done this many times in the past and never had an issue. What changed?

Alohci · Accepted Answer · 2025-03-05 01:15:26Z

This is really all about "overflow" and what the values of the overflow property really mean. Overflow happens when an element is painted partly or entirely outside of its container.

overflow: hidden means that the browser does not provide the user controls (e.g. scrollbars) to shift the scrollport to show that overflowed content.

Importantly, it doesn't mean that the scrollport doesn't exist, or that there is no means to shift the scrollport to show that content.

When the checkbox is checked, the focus is moved to the checkbox. If scrollports need to be scrolled to show the focussed element then that's what happens, and that's what you are seeing.

One way to fix this is simply to change overflow: hidden to overflow: clip. The clip value simply removes the overflowed content from the rendering, so there is nothing to scroll to.

Other suggested solutions such as using top: -5000px or left: -5000px (in LTR direction) in essence work the same way. Content is automatically clipped on those sides so there is again nothing to scroll to.

document.getElementById('fixme').addEventListener('click', () => {
  const input = document.querySelector('input');
  input.style.position = 'static';
  setTimeout(() => input.style.position = 'absolute', 10);
});

body {
  font-size: 100%;
  font-family: sans-serif;
}

.container {
  position: relative;
  overflow: clip;      /* <=== Just this line changed */
  background: #c00;
  color: white;
  padding: 1rem;
  border-radius: .5rem;
  max-width: 600px;
  margin-right: auto;
  margin-bottom: 1rem;

}

.fancy-toggle {
  display: flex;
  gap: 1rem;
}

label {
  display: flex;
  gap: 1rem;
}

input {
  position: absolute;
  right: -5000px;
}

.pseudo-checkbox {
  display: grid;
  place-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: white;
  border: 2px solid black;
}

input:checked+label .pseudo-checkbox .fake-check {
  color: black;
}

<main>
  <div class="container">
    <div class="fancy-toggle">
      <div class="row-icon">
        [ICON]
      </div>
      <input type="checkbox" id="checkbox" value="1">
      <label for="checkbox">
          <span>
            <span class="pseudo-checkbox">
              <span class="fake-check">X</span>
            </span>
          </span>
          <span class="pseudo-checkbox-label">Yes I would like this option</span>
        </label>
    </div>
  </div>
  <button id="fixme">Click Me to "Fix" the issue</button>

  <p>Clicking the &lt;label&gt; element checks the checkbox input due to the `for` designation.</p>
  <p>The checkbox is `display: absolute` and positioned way off screen when the page loads.</p>
  <p>When you click the label to check the box, the absolute position of the checkbox is broken is essentially treated as position: relative (as the `right: -5000px` is still applied).</p>
  <p>The result of this, due to overlow hidden on the parent container, is that all of the desireable content is pushed to the left off screen.</p>
  <p>What /SHOULD/ happen is the checkbox remains aboslutely positioned off-screen to the right, keeping the desired content in-place.</p>
  <p>Once causing the issue, you can press the fix button to force the position of the checkbox to `static`, and then 10ms later change it back to `absolute`. This simple action "Fixes" the issue. If you inspect the checkbox element before pressing the button, the borwser will show the position is absolute even though it's not being rendered as such.</p>
  <p>It makes no sense that simply removing and restoring the position value of the checkbox fixes the render.</p>
</main>

Thanks - I think I just had not done this in a while and what changed was that I had probably used top or left in the past and this time just happened to use a negative right without realizing this would cause a glitch.

Ori Drori · Accepted Answer · 2025-03-04 23:04:51Z

When on RTL layout, you can use top: -5000px; or left: -5000px without causing glitches like this. However, since you don't need to see the checkbox, and you control with the for attribute, you can just set it to display: none:

document.getElementById('fixme').addEventListener('click', () => {
  const input = document.querySelector('input');
  input.style.position = 'static';
  setTimeout(() => input.style.position = 'absolute', 10);
});

body {
  font-size: 100%;
  font-family: sans-serif;
}

.container {
  position: relative;
  overflow: hidden;
  background: #c00;
  color: white;
  padding: 1rem;
  border-radius: .5rem;
  max-width: 600px;
  margin-right: auto;
  margin-bottom: 1rem;

}

.fancy-toggle {
  display: flex;
  gap: 1rem;
}

label {
  display: flex;
  gap: 1rem;
}

input {
  display: none;
}

.pseudo-checkbox {
  display: grid;
  place-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: white;
  border: 2px solid black;
}

input:checked+label .pseudo-checkbox .fake-check {
  color: black;
}

<main>
  <div class="container">
    <div class="fancy-toggle">
      <div class="row-icon">
        [ICON]
      </div>
      <input type="checkbox" id="checkbox" value="1">
      <label for="checkbox">
          <span>
            <span class="pseudo-checkbox">
              <span class="fake-check">X</span>
            </span>
          </span>
          <span class="pseudo-checkbox-label">Yes I would like this option</span>
        </label>
    </div>
  </div>
  <button id="fixme">Click Me to "Fix" the issue</button>

  <p>Clicking the &lt;label&gt; element checks the checkbox input due to the `for` designation.</p>
  <p>The checkbox is `display: absolute` and positioned way off screen when the page loads.</p>
  <p>When you click the label to check the box, the absolute position of the checkbox is broken is essentially treated as position: relative (as the `right: -5000px` is still applied).</p>
  <p>The result of this, due to overlow hidden on the parent container, is that all of the desireable content is pushed to the left off screen.</p>
  <p>What /SHOULD/ happen is the checkbox remains aboslutely positioned off-screen to the right, keeping the desired content in-place.</p>
  <p>Once causing the issue, you can press the fix button to force the position of the checkbox to `static`, and then 10ms later change it back to `absolute`. This simple action "Fixes" the issue. If you inspect the checkbox element before pressing the button, the borwser will show the position is absolute even though it's not being rendered as such.</p>
  <p>It makes no sense that simply removing and restoring the position value of the checkbox fixes the render.</p>
</main>

Thanks - the reason I avoid display: none for this is that in the event this is part of a form that would be submitted, then the values of inputs with that display value are not sent with the post data.

Mister Jojo · Accepted Answer · 2025-03-05 16:10:18Z

0

I think you got off on the wrong foot with CSS

body {
  font-size: 16px;
  font-family: sans-serif;
}

div.row-icon {
  display : inline-block;
}
label {
  display        : block;
  background     : crimson;
  color          : white;
  padding        : 1rem;
  border-radius  : .5rem;
  cursor         : pointer;

  input[type="checkbox"] {
    appearance     : none;
  }

  span.pseudo-checkbox {
    display        : inline-block;
    width          : 1.5rem;
    aspect-ratio   : 1/1;
    line-height    : 1.5rem;
    background     : white;
    border         : 2px solid black;
    vertical-align : middle;
    text-align     : center;
  }
}

label:has(input:checked) span.pseudo-checkbox::before {
  content : 'X';
  color   : black;
}

<label>
  <div class="row-icon"> [ICON] </div>
  <input type="checkbox" id="my-checkbox" value="1">
  <span class="pseudo-checkbox"></span>
  <span class="pseudo-checkbox-label">Yes I would like this option</span>
</label>

First of all you don't need to use

input {
  position: absolute;
  right: -5000px;

but simply

input[type="checkbox"] {
    appearance: none;

Then I suggest you use an all-encompassing label rather than a separate one

<label>
  <input type="checkbox" id="my-checkbox" value="1">
  <span class="pseudo-checkbox"></span>
  <span class="pseudo-checkbox-label">Yes I would like this option</span>
</label>

this gives you a lighter and easier to maintain code over time.

as for the X of your pseudo-checkbox:

label:has(input:checked) span.pseudo-checkbox::before {
  content : 'X';
  color   : black;
}

voila ;)

edited Mar 5 at 16:10

answered Mar 5 at 0:03

Mister Jojo

22.9k6 gold badges28 silver badges45 bronze badges

1 Comment

Rick Kukiela Mar 5 at 20:02

Hey thanks for this response - I wasn't familiar with the appearance css property! Love that I still learn things after decades! I checked caniuse on this just now and it seems its pretty safe to use at this point :) -- Regarding the X -- this was just a "fast demo" I set up to replicate the issue. The production code I was working on that this stems from uses an image for the check mark per the client request. I appreciate your contribution none the less.

Collectives™ on Stack Overflow

Absolute checkbox in overflow container breaks render when being checked

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related