Почему странная линия появляется вокруг моего div при уменьшении / уменьшении?

Question

Мой код довольно прост:

<div class="mail-header-title">
    ${title}
</div>
<div class="mail-header-down-rounded-triangle">
   <img src="fill-1@3x.png"/>
</div>

 .mail-header-title {
            padding: 24px 50px 36px 50px;
            width: 591px;
            font-family: Arial, sans-serif;
            font-size: 42px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.29;
            letter-spacing: normal;
            color: #ffffff;
        }

        .mail-header-content {
            padding: 13px 50px 16px 50px;
            font-family: Arial, sans-serif;
            font-size: 20px;
            font-weight: normal;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.56;
            letter-spacing: normal;
            color: #444560;
            background-color: #FFFFFF;
            border: none !important;
        }

        .mail-header-down-rounded-triangle {
            background-color: #FFFFFF;
            text-align: center;
            border: 0;
            padding-top: 0;
        }

        .mail-header-down-rounded-triangle img {
            height: 24px;
            width: 101px;
            /*content: url("fill-1@3x.png");*/
        }

Первый фон div имеет синий цвет, а второй div содержит это изображение ниже.

Я уверен, что я установил границу div как none . Когда страница отображается, все выглядит хорошо. Но когда я увеличиваю / уменьшаю масштаб, появляется эта синяя линия.

Я не уверен, что случилось, есть идеи по этому поводу?