画像に被せた擬似要素のマスクをアニメーションでずらす時、画像の輪郭がうっすら出る

お世話になっております。

スライダーを作っており、擬似要素のマスクをcssのanimationとtransformでずらして
画像を表示させるという実装をしております。

ですが、マスクの下の画像が出てくる際、画像の輪郭がうっすら見えてしまう時があります。
choromeでもsafariでも表示されたり、されなかったりします。

このように、マスクの下の画像の輪郭のようなものが出ることがあります。

backface-visibility: hidden;を追加・アニメーションのcssだけ
最後に読み込むなどを試してみたのですが解決には至らず、
どなたかご助言いただけませんでしょうか。

コードは以下になります。

html
1      <section id="cafe_menu" class="bl_menu ly_section">
2         <h2>メニューセクション</h2>
3        <p id="menu_prev" class="bl_menu_arrow bl_arrow_left"></p>
4        <p id="menu_next" class="bl_menu_arrow bl_arrow_right"></p>
5        <div class="ly_inner">
6          <div class="el_cb bl_menu_slideContent current">
7            <div class="bl_menu_imgWrapper scroll">
8              <img src="https://placehold.jp/1500x800.png" alt="">
9            </div>
10            <div class="bl_menu_body fade">
11              <h3 class="el_lv3_ttl">オリジナルコーヒー</h3>
12              <div class="bl_menu_txt">
13                説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。 </div>
14            </div>
15          </div>
16          <div class="el_cb bl_menu_slideContent">
17            <div class="bl_menu_imgWrapper">
18              <img src="https://placehold.jp/57d2eb/ffffff/1500x800.png" alt="">
19            </div>
20            <div class="bl_menu_body fade">
21              <h3 class="el_lv3_ttl">オリジナルコーヒー2</h3>
22              <div class="bl_menu_txt">
23                2説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。 </div>
24            </div>
25          </div>
26          <div class="el_cb bl_menu_slideContent">
27            <div class="bl_menu_imgWrapper">
28              <img src="https://placehold.jp/578beb/ffffff/1500x800.png" alt="">
29            </div>
30            <div class="bl_menu_body fade">
31              <h3 class="el_lv3_ttl">オリジナルコーヒー3</h3>
32              <div class="bl_menu_txt">
33                3説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。 </div>
34            </div>
35          </div>
36          <ul id="menu_thumbs" class="bl_img_thumbUnit">
37            <li class="current"><img src="https://placehold.jp/1500x800.png" alt="サムネイル"></li>
38            <li><img src="https://placehold.jp/57d2eb/ffffff/1500x800.png" alt="サムネイル"></li>
39            <li><img src="https://placehold.jp/578beb/ffffff/1500x800.png" alt="サムネイル"></li>
40          </ul>
41        </div>
42      </section><!-- /#cafe_menu .ly_section -->
43     
44
45  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
46

css
1/* animation */
2@keyframes scroll_img {
3  100% {
4    transform: translateX(100%);
5  }
6}
7
8.bl_menu_imgWrapper {
9    position: relative;
10  overflow: hidden;
11  height: 0;
12  padding-top: 50%;
13  & > img {
14    position: absolute;
15    top: 50%;
16    width: 100%;
17    height: 100%;
18    transform: translateY( -50% );
19    object-fit: cover;
20    font-family: 'object-fit: contain;' /*ie*/
21  }
22  
23  &:before {
24     content: '';
25  background: #DCEAF2;
26  bottom: 0;
27  left: 0;
28  right: 0;
29  top: 0;
30  z-index: 1;
31  pointer-events: none;
32  position: absolute;
33  }
34}
35
36.bl_menu_imgWrapper.scroll_img::before {
37  animation: scroll_img 1s cubic-bezier(.4, 0, .2, 1) forwards;
38 
39}
40
41/* block */
42.bl_menu {
43  position: relative;
44}
45
46.bl_menu_slideContent {
47  width: 100%;
48  margin: auto;
49  background: #DCEAF2;
50  padding: 30px 20px;
51}
52.bl_menu_arrow {
53  position: absolute;
54  top: 30%;
55  width: 60px;
56  height: 60px;
57  &:hover {
58    cursor: pointer;
59  }
60  &.bl_arrow_left {
61    left: 5%;
62    border-top: 1px solid #333;
63    border-left: 1px solid #333;
64    transform: rotate( -45deg );
65  }
66  &.bl_arrow_right {
67    right: 0%;
68    border-top: 1px solid #333;
69    border-left: 1px solid #333;
70    transform: rotate( -225deg );
71
72  }
73}
74
75.bl_menu .bl_img_thumbUnit {
76  width: 100%;
77  margin-right: auto;
78  margin-left: auto;
79}
80
81/* for js */
82.bl_menu_slideContent {
83  display: none;
84}
85.bl_menu_slideContent.current {
86  display: block;
87}
88
89.bl_img_thumbUnit {
90  display: flex;
91  justify-content: flex-end;
92  margin-top: 7px;
93  & img {
94    width: 80px;
95    margin-left: 7px;
96    cursor: pointer;
97  }
98  & li img{
99    border: 2px solid transparent;
100    transition: border .3s;
101  }
102  & li.current img{
103    border: 2px solid #333;
104  }
105}
106
107.ly_section {
108  max-width: 500px;
109  padding-left: 50px;
110  padding-right: 50px;
111  margin-left: auto;
112  margin-right: auto;
113}
114
115ul li {
116  list-style: none;
117}

jQuery
1jQuery(function ($) {
2  /* for menu section */
3  $('#menu_thumbs li').on('click', function () {
4    var index = $('#menu_thumbs li').index(this);
5    $(this).addClass("current").siblings(".current").removeClass("current");
6
7    $('.bl_menu_slideContent').removeClass('current').eq(index).addClass('current');
8
9    $('.bl_menu_imgWrapper').removeClass('scroll_img').eq(index).addClass('scroll_img');
10  });
11
12  $('#menu_next').on('click', function () {
13    var length = $('#menu_thumbs li').length;
14    var current = $('#menu_thumbs li.current');
15    var i = $('#menu_thumbs li').index(current);
16
17    if ((i + 1) < length) {
18      $('#menu_thumbs li').eq(i + 1).addClass("current").siblings(".current").removeClass("current");
19      $('.bl_menu_slideContent').eq(i + 1).addClass('current').siblings(".current").removeClass('current');
20
21      $('.bl_menu_imgWrapper').removeClass('scroll_img').eq(i + 1).addClass('scroll_img');
22
23    } else {
24      $('#menu_thumbs li').eq(0).addClass("current").siblings(".current").removeClass("current");
25      $('.bl_menu_slideContent').eq(0).addClass('current').siblings(".current").removeClass('current');
26      $('.bl_menu_imgWrapper').removeClass('scroll_img').eq(0).addClass("scroll_img")
27    }
28   
29  });
30
31  $('#menu_prev').on('click', function () {
32    var current = $('#menu_thumbs li.current');
33    var i = $('#menu_thumbs li').index(current);
34
35    $('#menu_thumbs li').eq(i - 1).addClass("current").siblings(".current").removeClass("current");
36    $('.bl_menu_slideContent').eq(i - 1).addClass('current').siblings(".current").removeClass('current');
37
38    $('.bl_menu_imgWrapper').addClass('scroll_img');
39 
40  });  
41 
42});