ReactJS - exact same elements behave differently when scaling up/down in chrome browser

Issue

I'm trying to achieve a section in a website that some absolute position indicators are placed on a relative position timeline with ReactJS, everything is all good until I scale up/down the website on the browser. Here's a minimal example that describe the problem:

Timeline:

import "./App.css";

function App() {
  return (
    <div className="timeline">
      <div className="indicator one"></div>
      <div className="indicator two"></div>
      <div className="indicator three"></div>

      <div className="indicator four"></div>
      <div className="indicator five"></div>
      <div className="indicator six"></div>
    </div>
  );
}

export default App;

the css:

.timeline {
  width: 50%;
  background-color: yellow;
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.indicator {
  position: absolute;
  height: 35px;
  width: 4px;
  background-color: #a43725;
}

.one {
  top: 50%;
  left: 30%;
}
.two {
  top: 50%;
  left: 31%;
}
.three {
  top: 50%;
  left: 32%;
}

.four {
  top: 60%;
  left: 40%;
}
.five {
  top: 60%;
  left: 41%;
}
.six {
  top: 60%;
  left: 42%;
}

Here is what the minimal example looks like, I have 6 absolute positioned rectangles which look exactly the same on relative position yellow background. One/two/three is a group (at the top) and four/five/six is another group (at the bottom). Everything looks good at 100% scale:

However when I scale it to 110% at the browser, it looks like this:

It is obvious that there's a line between rectangle one and two, but not between the other rectangles.

Which I think rectangle #1 does not scale as large as other rectangle? The problem is I am making a timeline thing and the rectangles are some kind of indicators that has to be (and supposed to be) visually looking the same as each other at any scale. Why does it behave differently and how can I fix it?

p.s. here is a js fiddle link for the minimal example but because the screen there is smaller the behaviour is a little bit different. The issue can be reproduced by resizing + scale up and down the small browser area. Here's a screenshot to proof that the issue appears in the fiddle.

I have only test this in Chrome and not sure how it behaves in other browsers

Solution

your issue is that the positioning is dependent on the timeline and the timeline is 50% width (half the screen) so the positioning is heavily dependent on the screen size as well

the following worked:

.one {
  top: 50%;
  left: calc(30% + 0px);
}
.two {
  top: 50%;
  left: calc(30% + 5px);
}
.three {
  top: 50%;
  left: calc(30% + 10px);
}

.four {
  top: 60%;
  left: calc(40% + 0px);
}

.five {
  top: 60%;
  left: calc(40% + 5px);
}
.six {
  top: 60%;
  left: calc(40% + 10px);
}

I also found some similar issue with the vertical positioning of the indicators if the height of the screen size changes to fix this would be better if the portion of the screen you want is fixed height

Answered By - Roy El Hajj