htmlcsscheckboxoverflowcss-position

Absolute checkbox in overflow container breaks render when being checked

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)

enter image description here

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

enter image description here

-- 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)

enter image description here

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?

Solution

  • 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>