How to XOR shapes with CSS only?

Question

In the example below, the two XORed bars do not completely cancel out when perfectly aligned. You can see their outline.

How to make the outline disappear, which is what a correct XOR should do?

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    filter: invert(100%);
    position: relative;
    height: 100vh;
}

.a {
    position: absolute;
    width: 250px;
    height: 50px;
    transform: rotate(45deg);
    background: white;
}

.b {
    position: absolute;
    width: 250px;
    height: 50px;
    transform: rotate(-45deg);
    mix-blend-mode: difference;
    background: white;
    animation: spin 1s infinite alternate;
}

@keyframes spin {
  0% { transform: rotate(30deg) }
  50% { transform: rotate(45deg) }
  100% { transform: rotate(60deg) }
}

<div class="container">
  <div class="a"></div>
  <div class="b"></div>
 </div>

Answer 1

This must be qualified as a workaround, not as a full answer. It does "make the outline disappear" as requested in the question, albeit not in the same configuration.

If you remove the transformation, as noticed by @SyndRain, the XOR works, even in animation (modified to show the fully XORed stated longer):

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    filter: invert(100%);
    position: relative;
    height: 100vh;
}

.a {
    position: absolute;
    width: 250px;
    height: 50px;
    background: white;
}

.b {
    position: absolute;
    width: 250px;
    height: 50px;
    mix-blend-mode: difference;
    background: white;
    animation: spin 2s infinite alternate;
}

@keyframes spin {
  0% { transform: rotate(0deg) }
  50% { transform: rotate(0deg) }
  100% { transform: rotate(45deg) }
}

<div class="container">
  <div class="a"></div>
  <div class="b"></div>
 </div>