How to make two parts look like one part inside SVG?

Question

We have an SVG that consists of two parts, which "are touching" exactly along some path.

The problem is that browser still draws grey pixels along the path even though distance between those two parts is 0.

.container {
  width: 100px;
  height: 100px;
  padding: 20px;
  background: black;
}

svg * { shape-rendering: geometricPrecision; }

<div class="container">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <defs>
      <clipPath id='clip_A'>
        <path d="M0 100 C45 100 50 0 100 0 V0 H0 z" />
      </clipPath>
      
      <clipPath id='clip_B'>
        <path d="M0 100 C45 100 50 0 100 0 V100 H0 z" />
      </clipPath>
    </defs>

    <!-- first part -->
    <rect 
      x='0'
      y='0'
      width='100'
      height='100'
      fill='#ffffff'
      clip-path='url(#clip_A)'
    />
    
    <!-- second part -->
    <rect 
      x='50'
      y='0'
      width='50'
      height='100'
      fill='#ffffff'
      clip-path='url(#clip_B)'
    />
  </svg>
</div>

One way is to add stroke, but this causes those parts to overlap, has many side effects (for example stroke inside <clipPath /> is ignored) and makes a mess in a complex SVG

I tried to set shape-rendering to: geometricPrecision, optimizeSpeed and crispyEdges, but none of them solves the problem definitively.

I suspect that browser does not take nearby objects into account when it does antialiasing and it is very noticeable on small features.

Is it possible to make so that those two parts look like one part, without any artifacts between them and without overlapping?