Gap on the right side when transitioning width - html

Question

I've a vertical full screen menu, with three columns. On hover, the actual columns width grow, the others shrink. The only problem, that there is a little gap on the right side when the cursor is moved fast between columns.
The code:
.service-navigation {
height: 100%;
width: 100%;
}
.service-navigation:hover .service-navigation-element {
width: 30%;
}
.service-navigation:hover .service-navigation-element:hover {
width: 40%;
}
.service-navigation-element {
width: 33.333333%;
height: 100%;
transition: .6s ease;
float: left;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
text-align: center;
box-sizing: content-box;
overflow: hidden;
}
How can I remove that gap, and why is it there?

Answer 1

How can I remove that gap,...
One solution could be to use flex. It will make things much easier and smooth. Just change the flex-basis on hover.
Example 1:
* { box-sizing: border-box; padding: 0; margin: 0; }
body, html { height: 100vh; width: 100vw; }
.service-navigation { height: 100%; width: 100%; display: flex; }
.service-navigation-element { flex: 1 1 33%; transition: .6s ease; }
.service-navigation-element:hover { flex-basis: 50%; }
.service-navigation-element:nth-child(1) { background-color: red; }
.service-navigation-element:nth-child(2) { background-color: green; }
.service-navigation-element:nth-child(3) { background-color: blue; }
<div class="service-navigation">
<div class="service-navigation-element">1</div>
<div class="service-navigation-element">2</div>
<div class="service-navigation-element">3</div>
</div>
Another solution could be to use display: table on the container and display: table-cell on the children.
Example 2:
* { box-sizing: border-box; padding: 0; margin: 0; }
body, html { height: 100vh; width: 100vw; }
.service-navigation { height: 100%; width: 100%; display: table; }
.service-navigation-element { display: table-cell; width: 10%; transition: .6s ease; }
.service-navigation-element:hover { width: 20%; }
.service-navigation-element:nth-child(1) { background-color: red; }
.service-navigation-element:nth-child(2) { background-color: green; }
.service-navigation-element:nth-child(3) { background-color: blue; }
<div class="service-navigation">
<div class="service-navigation-element">1</div>
<div class="service-navigation-element">2</div>
<div class="service-navigation-element">3</div>
</div>
However, there is a problem with this second approach. You have to provide an initial width to the children (width:auto will not fire transtions). Also, it is not possible to precisely control the width of the children once hovered. The table-cell would re-calculate the widths on its own. I would recommend the first approach of using flex.
and why is it there?
I think that it is because of these two rules:
.service-navigation:hover .service-navigation-element {
width: 30%;
}
.service-navigation:hover .service-navigation-element:hover {
width: 40%;
}
When you hover on the container, all the children start reducing to 30% width from 33.3333%. When that happens there will be extra space on the right (30 * 3 != 100). Meanwhile, the child on which hover is fired starts increasing its width to 40%. When you do it slowly, there is enough time for both the transitions to complete smoothly. However, when you hover quickly then one transition is not yet complete when another starts and it abruptly ends, causing flicker.

Answer 2

The gap results from the animate-style.
The default transition-timing-function is ease-in-out, wich can be described in a cubic bezier curve. possible solutions may be to set transition-timing-function: linear or adding a transition-delay.
Also the animation-duration is calculated everytime you enter an element. So leaving an element while its at full width and then quickly reentering it will cause the animation from 90% width to 100% width to be the full .6s long