Despite using rem, why does the element size change when I zoom in or out?

Question

I'm implementing a project where I put a button in the input using the CSS position property, everything works fine, even I have no problem in responsive mode, coincidentally I want to zoom - check some content, I realized that when I zoom in or out there is a gap between the top or bottom of the input, and at certain sizes there is no gap, everything is fine, I use rem for all my CSS properties , because as far as I know rem can be zoomed through the viewport and this zooming in or out is related to the viewport size, so logically if I Using rem, there shouldn't be any gaps when I zoom out or zoom in, but there are!

I even changed the units from rem to PX (recommended in another question similar to mine), still the same problem, I'm in a different Checked it on browsers, every browser has this problem but their behavior and the gap they create at different zoom sizes are different. Additionally, I don't have any issues responding to breakpoints or sizes, everything works fine.

Relationship between viewport and zoom in or out based on MDN:

Your viewport is everything currently visible, specifically the "What is a viewport" section and maybe some navigation menus. The size of the viewport depends on the size of the screen, whether the browser is in full-screen mode, and whether the user

zooms in.

https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts

Relationship between

viewport and rem:

For responsive web pages, the size of web page elements will change with the size of the viewport. CSS enables you to declare font sizes using absolute units such as pixels (px) or relative units such as percentage, em, or rem units.

https://blog.hubspot.com/website/css-rem#:~:text=Rem (short for “root-,1rem will also equal% 2016 pixels.

So the question is: Because multiple browsers behave differently, does this button get repositioned due to zooming in or out, has something to do with browser structure or programming, or is it just something else, and what's the logic behind it?

/*Default Adjustments*/

:root {
  --color-secondary: #00acc1;
  --color-accent: #F86F03;
  --color-body: #212121;
  --color-text: #FBFFDC;
  --colorButton: #847f7d;
  --colorBorder: #A8A196;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

*,
 ::placeholder {
  color: var(--color-text);
}

html {
  font-size: 10px;
}

body {
  font-family: "Inter", arial, helvetica, sans-serif;
  font-size: 1.5rem;
  line-height: 1.5;
  background: var(--color-body);
}

.btn {
  background: var(--colorButton);
  border: .1rem solid var(--colorBorder);
  border-radius: .3rem;
}


/*Basic divs*/

.adjust {
  display: flex;
  justify-content: center;
}

.whole {
  background: var(--color-secondary);
  padding: 1.5rem;
  border-radius: 0.6rem;
  margin-top: 2rem;
}

.add {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 1.3rem;
}

.addButton {
  position: absolute;
  cursor: pointer;
  top: 0.27rem;
  right: 8rem;
  font-size: 1.3rem;
  border: 0;
  border-radius: 0 .3rem .3rem 0;
  background: var(--colorButton);
}

.add input {
  outline: none;
  text-indent: 0.5rem;
  font-size: 1.3rem;
  background: var(--colorBorder);
  border: .3rem solid var(--colorButton);
  border-radius: .5rem;
}

.add input::placeholder {
  font-size: 1.25rem;
}

<div class="adjust">
  <div class="whole">
    <form class="add">
      <input class="addBook" type="text" required maxlength="50" pattern="\S(.*\S)?" title="Your book name can't start or end with white space and should include at least 
            1 non-white space character" placeholder="e.g Harry Potter" name="" id="" />
      <button class=" btn addButton">Add</button>
    </form>
  </div>
</div>

image:

This is 100% scaled size, everything is fine

This is 90% of the scaled size with a gap at the top

This is 80% of the zoomed size and everything is back to normal again!

The same result occurs in Zooming-in, so if this problem is related to my code, why is it not constant in each zoom size, if it is not related to my code, what is happening behind the scenes What?

Answer 1

I think this has to do with absolute positioning, I've experienced it before. However, to solve this problem, you can add a wrapper around the button, which is a flexbox.

<div class="wrapper">
  <button class="btn addButton">Add</button>
</div>

.wrapper {
    height: 100%;
    width: fit-content;
    padding: .3rem 0;
    position: absolute;
    top: 0;
    right: 0;
    float: left;
    border-radius: 0 .3rem .3rem 0;
    display: flex;
    /*To keep item centered so gap will not appear*/
    align-items: center;
}
.addButton {
    font-size: 1.3rem;
    border: 0;
    background: var(--colorButton);
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    cursor: pointer;
}