Django 带铬的虫子显示器

我目前在一个python/Django项目上，我也在使用bootstrap

我有一个显示错误，只有谷歌浏览器。当我加载页面时，一切正常，然后当我滚动时，出现错误：

当我重新加载页面时，一切都恢复正常：

该缺陷在本地项目中不存在，仅在服务器上的生产中存在（ubuntu带有Gunicorn和Nginx）。当我将鼠标悬停在这个白色块上时，文本将随机显示。这不是唯一发生这种情况的地方。我不知道这个问题是否为人所知，但我完全不知道它可能是什么

下面是我们在图中看到的代码部分：

<!-- 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">
                            <a href="{% url 'watch' 'theoretical' level video_previous %}" class="text-left subpart-link">< Précèdent</a>
                            <a href="{% url 'watch' 'theoretical' level video_next %}" class="subpart-link float-right">Suivant ></a>
                        </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">
                        <a href="{% url  'watch' 'theoretical' level video.id %}" class="dashboard-cta-watch-button">TÉLÉCHARGER LES RESSOURCES</a>
                        </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 -->

{{video.description}}

苏党

{s的%s在子部分%}


{%endfor%}










墨莫


{子部分%中sp的%s}
{%if sp.u memo%}

{{sp.子部分_标题|标题}

{{sp.子部分|备忘录|安全|断线}


{%endif%}
{%endfor%}

---

我没有在代码中使用任何特别的东西。我希望有人能帮助我

经过多次测试，我终于发现了问题并解决了

视频和图像中的显示错误（作为提醒，仅在google chrome上）来自我在css文件中的一行

在我的身体里，我的线条溢出：覆盖

body{
   font-family: 'main-font-medium', Fallback, serif;
   font-weight: 0;
   font-style: normal;
   /*overflow: auto;*/
   overflow-x: hidden!important;
   scroll-behavior: smooth;
}

谢谢你，朱霍努提拉

---

我希望这可以帮助其他人。

您是否查看了“开发人员工具”中的“网络”选项卡？某些前端库在prod中的加载顺序可能与在dev中的加载顺序不同，从而导致此类行为。您好，感谢您的帮助。事实上，我看到dev和prod之间的加载是不同的。在prod中，js文件是在css文件之前加载的（顺序是正确的）。也许问题在于加载css文件的顺序不对？在这种情况下，有没有办法解决这个问题？另外，我注意到，当我更改窗口大小时，所有内容都正确显示。当consoleJ'aiégalement intégréle视口在prod中正确运行时，我在该视口中没有任何特定错误。它是否以正确的顺序加载它们？如果是css的顺序，您可以编写css，这样顺序就无关紧要了，或者使用django sass编译器之类的工具将它们捆绑起来。