Bug Display whith chrome - django

Question

I am currently on a python / Django project, I am also using bootstrap.
I have a display bug only with google chrome. When I load my page everything is fine then when I scroll, the bug occurs:
When I reload the page everything is back to normal:
This bug is not present on the project locally, only from production on a server (ubuntu with Gunicorn and Nginx). When I hover the mouse over this white block, the text displays randomly. This is not the only place where it happens. I don't know if this problem is known but I have absolutely no idea what it might be.
here is the part of the code that we see in picture :
<!-- Description content -->
<div class="container-fluid main-color-dark-bg pb-4">
<div lass="row">
<div class="col-lg-8 col-md-10 col-12 mx-auto mb-3">
< Précèdent
Suivant >
</div>
</div>
<!-- Description -->
<div class="row col-lg-8 col-md-10 col-12 mx-auto">
<div class="">
<p class="theoretical-watch-p ext-md-left text-center">
{{ video.description }}
</p>
</div>
</div>
<!-- Sous parties et Ressources -->
<div class="row mx-auto col-lg-8 col-md-10 col-12">
<!-- Sous parties-->
<div class="col-lg-7 col-12 px-0">
<h4 class="theoretical-subpart-title main-color-white text-md-left text-center ">Sous parties</h4>
<ul class="list-unstyled text-md-left text-center">
{% for s in subparts %}
<li class="">
<a href="{{s.subpart_url}}" class="subpart-link">
{{s.subpart_title |title}}
<span class="subpart-hook">[<span>
{% if s.subpart_time.hour == 0 %}
{{ s.subpart_time|time:"i:s" }}
{% else %}
{{ s.subpart_time|time:"H:i:s" }}
{% endif %}
<span class="subpart-hook">]<span>
</a>
</li>
{% endfor %}
</ul>
</div>
<!-- Ressources -->
<div class="col-lg-5 col-12 my-md-0 my-4 text-center mx-auto">
TÉLÉCHARGER LES RESSOURCES
</div>
</div>
</div>
<!-- End Description content -->
</div>
<!-- TAB Menu header mr-lg-auto mx-md-auto mx-sm-auto mx-auto -->
<div class="row col-12 px-0 mx-auto">
<ul class="nav mx-auto d-flex d-inline-flex" id="myTab" role="tablist">
<li class="d-inline-flex">
<a class="nav-link theoretical-tab-link active" id="tab-memo" data-toggle="tab" href="#content-memo" role="tab" aria-controls="content-memo" aria-selected="true">
Les points clés du chapitre
</a>
</li>
<li id="header-tab-program" class="d-inline-flex">
<a class="nav-link theoretical-tab-link" id="tab-program" data-toggle="tab" href="#content-program" role="tab" aria-controls="content-program" aria-selected="false">
Contenu du cours
</a>
</li>
<li class="d-inline-flex">
<a class="nav-link theoretical-tab-link" id="tab-definitions" data-toggle="tab" href="#content-definitions" role="tab" aria-controls="content-definitions" aria-selected="false">
Lexique
</a>
</li>
</ul>
</div>
<!-- TAB Menu content -->
<div class="">
<div class="tab-content w-100" id="myTabContent">
<!-- MEMO -->
<div class="tab-pane fade active show" id="content-memo" role="tabpanel" aria-labelledby="tab-memo">
<!-- Title vidéo et description -->
<div class="col-lg-8 col-12 mx-auto mb-5">
<!-- Title -->
<div class="row px-0 section-title my-auto col-12 mx-auto">
<div class="col-12 mx-auto my-auto">
<h1 class="mx-auto section-title text-center">
<hr class="main-color-grey-bg">
<img class="img-left" width="2%" height="auto" src="{% static 'images/pictograms/clover-black.svg' %}">
MÉMO
<img class="img-right" width="2%" height="auto" src="{% static 'images/pictograms/heart-red.svg' %}">
<hr class="main-color-grey-bg">
</h1>
</div>
</div>
<!-- APERCU - SECTION LEXIQUE -->
<div class="row mx-0">
<!-- colonne contenu -->
<div class="col-12">
<ul class="list-unstyled mt-5">
{% for sp in subparts %}
{% if sp.subpart_memo%}
<li class="theoretical-tab-content-p-memo">
<h4 class="">{{ sp.subpart_title |title }}</h4>
<p class="theoretical-tab-content-p-memo">
{{ sp.subpart_memo | safe | linebreaks}}
</p>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
<!-- END MEMO -->
I don't use anything in particular in the code. I hope that someone could help me!

Answer 1

After multiple tests I finally identified the problem and solved.
The display bugs (as a reminder, only on google chrome), as seen in the videos and images came from a line that I had placed in my css file.
in my body I had the line overflow: overlay;
body{
font-family: 'main-font-medium', Fallback, serif;
font-weight: 0;
font-style: normal;
/*overflow: auto;*/
overflow-x: hidden!important;
scroll-behavior: smooth;
}
thanks to you JuhonRutila !
I hope this can help other people.