Why are some of the background images shaking while transitioning the background-size property?

Question

I wanted to create the same effect as this tutorial (1 minute long): https://www.youtube.com/watch?v=_1vEGYWaaQY&ab_channel=KevinPowell

So there's a background image that creates the underline effect like the tutorial above showed, I made the background bigger than an underline just to be more clear, now some of these background images are working properly but some of them start shaking when the transition starts

I tried changing the first letter of the text and the shaking was gone, it's so weird, it should be a bug with the browser or something(I'm using Chrome on Windows 10) because the CSS is fine I guess, is there any fix for this issue?

You can see two different texts, but with the same CSS styles:

This is the broken one, just notice the first line of the text (top right beside the letter "و") when I hover the mouse on the text and when the background-size transitions to 100%, the beginning piece of the background starts to shake

And this is another text, but with the same CSS styles as the text above, notice the beginning piece of this background image holds still and it's not shaking (beside the letter "مـ")

Maybe this problem is just because I'm using another language... I don't know

HTML:

<li id="EachNews">
    <div>
        <h2><a>(The texts in the GIFs which loads from database...)</a></h2>
    </div>
</li>

CSS:

:root {
    --main: #6c4fff;
    --title: #B3B3B3;
}
#EachNews h2 {
    margin-top: -11px;
    width: 400px;
    transition: all 2s ease-out;
}

#EachNews h2 a {
    line-height: 27px;
    color: var(--title);
    font-family: 'vazir FD';
    font-weight: 500;
    background-image: linear-gradient(120deg, #CA4FFF, var(--main));
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0% 15px;
    transition: background-size 300ms ease-in-out;
}

#EachNews h2:hover a {
    background-size: 100% 15px;
}

:root {
  --main: #6c4fff;
  --title: #B3B3B3;
}

body {
  direction: rtl;
}

.EachNews h2 {
  margin-top: 50px;
  width: 400px;
  transition: all 2s ease-out;
  direction: rtl;
}

.EachNews h2 a {
  text-decoration: none;
  line-height: 30px;
  direction: rtl;
  color: var(--title);
  font-family: 'vazir FD';
  font-weight: 500;
  background-image: linear-gradient(120deg, #CA4FFF, var(--main));
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 0% 15px;
  transition: background-size 300ms ease-in-out;
}

.EachNews h2:hover a {
  background-size: 100% 15px;
}

<ul>
  <li class="EachNews">
    <div>
      <h2><a>محققان با عکس سیستم احراز هویت ویندوز Hello مایکروسافت را فریب دادند</a></h2>
    </div>
  </li>

  <li class="EachNews">
    <div>
      <h2><a>وزارت دادگستری آمریکا: دادستان‌ها هدف حمله سایبری هکرهای سولار ویندز بوده‌اند</a></h2>
    </div>
  </li>
</ul>

EDIT: Even with a shorter text the shaking still happens, in my project the shaking is more obvious than the code snippet, I don't know if you should count on the code snippet or not, but I think this is related to browser bugs or something... because the problem changes by multiple factors, like changing the first letter or zooming in, in the browser etc...

And after I zoom in 175% in my browser, the shaking is gone:

Answer 1

From comments.

last ideas (i can't reproduce either your issue), set an offset position to you background alike : background-position: 110% 100%;

It will make the background coming from outside the container and should avoid an average calculation for right/100%.

Answer 2

After playing around with code I noticed two things. First, this happens only when text-align is set to right, and second, the problem is not with the letters, the shaking happens when text is long. So I think one option to solve your problem is to truncate your text. I have added two links with different lenghth so you can check it out.

html {
  direction: rtl;
}

body {
  padding: 15px;
}

ul {
  list-style: none;
  padding: 15px;
}

#EachNews h2 {
    margin-top: -11px;
    width: 400px;
    transition: all 2s ease-out;
    margin-top: 50px;
}

#EachNews h2 a {
    line-height: 27px;
    color: #000000;
    font-family: 'vazir FD';
    font-weight: 500;
    text-decoration: none;
    background-image: linear-gradient(120deg, #CA4FFF, #ff0000);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 0 20px;
    transition: background-size 300ms ease-in-out;
}

#EachNews h2:hover a {
    background-size: 100% 20px;
}

<ul>
  <li id="EachNews">
    <div>
      <h2>
        <a href="#">
        وزارت دادگستری شسیب شسیب شسیب شسیب شسیب شسیب شسیب سشیب شسیب سشیب سشیب شسیب شسیب سشیب شسیب شس بسشی بسب ستشی تسیب سنیت بنشس سشیب شسیب سشیب سیب شسیب شسیب شسی بب
        وزارت دادگستری شسیب شسیب شسیب شسیب شسیب شسیب شسیب سشیب شسیب سشیب سشیب شسیب شسیب سشیب شسیب شس بسشی بسب ستشی تسیب سنیت بنشس سشیب شسیب سشیب سیب شسیب شسیب شسی بب
        </a>
      </h2>
      <h2>
        <a href="#">
        وزارت دادگستری شسیب شسیب شسیب شسیب شسیب شسیب شسیب سشیب شسیب سشیب سشیب شسیب شسیب
        </a>
      </h2>
    </div>
  </li>
</ul>

Answer 3

its because the padding ,, in some UTF-8 fonts you will need to add 2px or so for example:

.EachNews a{
    padding: 3px;
}

edit:

:root {
  --main: #6c4fff;
  --title: #B3B3B3;
}

body {
  direction: rtl;
}

.EachNews h2 {
  margin-top: 50px;
  width: 400px;
  transition: all 2s ease-out;
  direction: rtl;
}

.EachNews h2 a {
  text-decoration: none;
  line-height: 30px;
  direction: rtl;
  color: var(--title);
  font-family: 'vazir FD';
  font-weight: 500;
  background-image: linear-gradient(120deg, #CA4FFF, var(--main));
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 0% 15px;
  transition: background-size 300ms ease-in-out;
      padding: 3px;
}

.EachNews h2:hover a {
  background-size: 100% 15px;
 
}

<ul>
  <li class="EachNews">
    <div>
      <h2><a>محققان با عکس سیستم احراز هویت ویندوز Hello مایکروسافت را فریب دادند</a></h2>
    </div>
  </li>

  <li class="EachNews">
    <div>
      <h2><a>وزارت دادگستری آمریکا: دادستان‌ها هدف حمله سایبری هکرهای سولار ویندز بوده‌اند</a></h2>
    </div>
  </li>
</ul>