CSS clip path issue with background

Question

I'm currently implementing a switch. The problem is that the background which should be hidden by the switch shows one thin line at the left end. I've absolutely no idea why. The strange thing is that here on SO everything looks really good. The switch is located in a scrollable main wrapper with all the other content. I thought this could be the problem but after removing the scrolling, the error was still there:

When I run the inspector and hover the element, the background seems to go out:

This is my code. I've tried a low but can't find the problem:

let toggle = document.getElementById('container');
let toggleContainer = jQuery('#toggle-container');
let toggleNumber;

jQuery('#container').click( function() {
  toggleNumber = !toggleNumber;
  if (toggleNumber) {
    toggleContainer.css( "clip-path", "inset(0 0 0 50%)" );
  } else {
    toggleContainer.css( "clip-path", "inset(0 50% 0 0)" );
  }
});

#container {
  width: 100%;
  height: 56px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  user-select: none;
  cursor: pointer;
  border-radius: 3px;
  -webkit-box-shadow: 0 0.2rem 0.4rem 0 rgba(0, 0, 0, .2);
  box-shadow: 0 0.12rem 0.4rem 0 rgba(0, 0, 0, .2);
}

.inner-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
}

.inner-container:first-child {
  background: gray;
  color: #ffffff;
}

.inner-container:nth-child(2) {
  background: chartreuse;
  color: #ffffff;
  clip-path: inset(0 50% 0 0);
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.toggle {
  width: 50%;
  position: absolute;
  height: inherit;
  display: flex;
  font-weight: 600;
}

.toggle p {
  margin: auto;
}

.toggle:nth-child(1) {
  right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
    <div class="inner-container">
      <div class="toggle">
        <p>Private</p>
      </div>
      <div class="toggle">
        <p>Public</p>
      </div>
    </div>
    <div class="inner-container" id='toggle-container'>
      <div class="toggle">
        <p>Private</p>
      </div>
      <div class="toggle">
        <p>Public</p>
      </div>
    </div>
  </div>

Answer 1

I would suggest an optimized version with less of code and without the use of clip-path:

let toggle = document.getElementById('container');
let toggleContainer = jQuery('.inner-container');

jQuery('#container').click(function() {
  toggleContainer.toggleClass('second');
  });

#container {
  margin-bottom: 20px;
  user-select: none;
  cursor: pointer;
  border-radius: 3px;
  box-shadow: 0 0.12rem 0.4rem 0 rgba(0, 0, 0, .2);
}

.inner-container {
  height: 56px;
  text-transform: uppercase;
  display: flex;
  background: 
    linear-gradient(chartreuse,chartreuse) left/50% 100% no-repeat,
    gray;
  color: #ffffff;
  transition: 0.2s;
}
.inner-container.second {
  background-position:right;
}

.toggle {
  width: 50%;
  display: flex;
  font-weight: 600;
}

.toggle p {
  margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="inner-container">
    <div class="toggle">
      <p>Private</p>
    </div>
    <div class="toggle">
      <p>Public</p>
    </div>
  </div>
</div>

Answer 2

This seems to be what you are seeing: Which was done by making the CSS: clip-path: inset(0 50% 0 1px);

Maybe just try adding some negative space to the left side:

toggleContainer.css( "clip-path", "inset(0 50% 0 -10px)" );