Inner div oscillates when using a CSS transition on the parent div

Question

Please run my code sample and hover over the black square, why does the inner div, the white border div, oscillate/shake? How do I make it stop doing that?

body {
  min-height: 100vh;
  display: flex;
}

.main-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.transition-container {
  background: black;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
  transition-duration: 1.25s;
  transition-property: margin, width, height;
}

.transition-container:hover {
  margin: 0;
  width: 120px;
  height: 120px;
}

.inner-container {
  border: 4px solid white;
  width: 60px;
  height: 60px;
}

<div class="main-container">
  <div class="transition-container">
    <div class="inner-container">
    </div>
  </div>
</div>

Goal

On hover of my outer div (<div class="transition-container">), I want it to grow and I want to use a transition to make it smooth
I don't want the growing div to take up any more space. Currently, to achieve this, I shrink the margins

Some of the answers [here](https://stackoverflow.com/q/15464055/2341603) may be able to help. — Obsidian Age, Nov 01 '18 at 02:21

score 0 · Answer 1 · answered Nov 01 '18 at 17:11

Adding transition-timing-function: steps(10, end); fixed my contrived example. Source.

body {
  min-height: 100vh;
  display: flex;
}

.main-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.transition-container {
  background: black;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
  transition-duration: 1.25s;
  transition-property: margin, width, height;
  transition-timing-function: steps(10, end);
}

.transition-container:hover {
  margin: 0;
  width: 120px;
  height: 120px;
}

.inner-container {
  border: 4px solid white;
  width: 60px;
  height: 60px;
}

<div class="main-container">
  <div class="transition-container">
    <div class="inner-container">
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Nov 01 '18 at 17:18

Changing the border width from 4px to 4.5px on <div class="inner-container"> fixed it. Changing it to any decimal seems to fix it. For instance if I use 5.5px or 3.5px that fixes it too. I don't understand why though ‍♂️, would love to know why!

I had to use this fix in our application as the transition-time-function fixed didn't work in our more complicated layout.

body {
  min-height: 100vh;
  display: flex;
}

.main-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.transition-container {
  background: black;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
  transition-duration: 1.25s;
  transition-property: margin, width, height;
}

.transition-container:hover {
  margin: 0;
  width: 120px;
  height: 120px;
}

.inner-container {
  border: 4.5px solid white;
  width: 60px;
  height: 60px;
}

<div class="main-container">
  <div class="transition-container">
    <div class="inner-container">
    </div>
  </div>
</div>

Inner div oscillates when using a CSS transition on the parent div

2 Answers2