スライダーの画像が消えてしまう

前提・実現したいこと

はじめまして。
ななめにループする画像スライダーをCSSで組んだのですが、途中で画像が途切れてしまいます。そして、なぜかマウスを少しだけ動かすと画像が表示されます。
画像を正しく表示させるためにご助力いただけると幸いです。

バグ

合計8枚のスライドを入れているのですが、上のように7枚目以降から消滅してしまいます。なぜかマウスをほんの少しだけ動かすと画像が表示されるようになります。

こうしたい

↑のように、画像が途切れることなく流れるようにしたいです。

HTML

<div class="top">
<div class="container">
　<div class="slider">
　　<div class="slider-box">
　　　<div class="loop-box">
　　　<ul class="loop1">
　　　　<li><img src="./img/top/slider1.png" /></li>
　　　　<li><img src="./img/top/slider2.png" /></li>
　　　　<li><img src="./img/top/slider3.png" /></li>
　　　　<li><img src="./img/top/slider4.png" /></li>
　　　　<li><img src="./img/top/slider5.png" /></li>
　　　　<li><img src="./img/top/slider6.png" /></li>
　　　　<li><img src="./img/top/slider7.png" /></li>
　　　　<li><img src="./img/top/slider8.png" /></li>
　　　</ul>
　　　<ul class="loop2">
　　　　<li><img src="./img/top/slider1.png" /></li>
　　　　<li><img src="./img/top/slider2.png" /></li>
　　　　<li><img src="./img/top/slider3.png" /></li>
　　　　<li><img src="./img/top/slider4.png" /></li>
　　　　<li><img src="./img/top/slider5.png" /></li>
　　　　<li><img src="./img/top/slider6.png" /></li>
　　　　<li><img src="./img/top/slider7.png" /></li>
　　　　<li><img src="./img/top/slider8.png" /></li>
　　　</ul>
　　　</div>
　　</div>
　</div>
</div>
</div>

CSS

.top {
	position: relative;
	width: 100%;
	height: 700px;
	overflow:hidden;
	background: #CCCCCC;
}
.top img{
	display:block;
	image-rendering:auto;
}
.container{
		position:relative;
		display:block;
}
.slider-box p, .slider-box div, .loop-box ul, .loop-box li {
	box-sizing: border-box;
	margin: 0 !important;
	padding: 0 !important;
}
.container .slider{
	position: relative;
	z-index:10;
}
.container .slider-box{
	position:absolute;
	top:-200px;
	left:-10%;
	box-sizing: border-box;
	overflow: hidden;
	width: 200%;
	transform:rotate(-13deg);
}
.container .loop-box{
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 620px;
	box-sizing:border-box;
}
.container .loop-box ul {
	position: absolute;
	left: 0;
	top: 0;
	display: flex; 
	justify-content: flex-start;
	width: calc(1500px * 8);
	animation: 60s linear infinite;
	height: 700px;
}
.container .loop-box li {
	display: flex;
	align-items: flex-end; 
	justify-content: center;
	color: #fff;
	width: calc(100% / 8);
	height: 700px;
}
.container .loop-box img {
	width: 100%;
	height: auto;
}
.loop-box ul.loop1 {
	animation-name: loop1;
}
.loop-box ul.loop2 {
	animation-name: loop2;
}
@keyframes loop1 {
	0% {transform: translateX(0); }
	49.99999% {transform: translateX(-100%); }
	50% {transform: translateX(100%);}
}
@keyframes loop2 {
	0% {transform: translateX(100%); }
	100%{transform: translateX(-100%); }
}

wawawa121212

2022/01/17 07:08

補足です。ななめに移動するスライダーで、６枚目までは正常に表示されます。どのブラウザーでも発生するので、CSSかHTMLの記述におかしなところがあるのかなと思っています。

行動規範の内容に同意します

回答1件

普通に動いたので詳しく見てないですが
提示いただいた部分とは別のところで問題が起きているのではないでしょうか？
https://www.youtube.com/watch?v=YkdxZAEkKjU

コメントを受け追記します

ご提示のソースをコピペし、下記のソースで動かしてみました
crome、firefox、edgeで試したところどのブラウザでも正常に動作します
※ソース中に全角スペースがあったのでそこについては削除しています

html
1
2<style>
3.top {
4	position: relative;
5	width: 100%;
6	height: 700px;
7	overflow:hidden;
8	background: #CCCCCC;
9}
10.top img{
11	display:block;
12	image-rendering:auto;
13}
14.container{
15		position:relative;
16		display:block;
17}
18.slider-box p, .slider-box div, .loop-box ul, .loop-box li {
19	box-sizing: border-box;
20	margin: 0 !important;
21	padding: 0 !important;
22}
23.container .slider{
24	position: relative;
25	z-index:10;
26}
27.container .slider-box{
28	position:absolute;
29	top:-200px;
30	left:-10%;
31	box-sizing: border-box;
32	overflow: hidden;
33	width: 200%;
34	transform:rotate(-13deg);
35}
36.container .loop-box{
37	position: relative;
38	width: 100%;
39	overflow: hidden;
40	height: 620px;
41	box-sizing:border-box;
42}
43.container .loop-box ul {
44	position: absolute;
45	left: 0;
46	top: 0;
47	display: flex; 
48	justify-content: flex-start;
49	width: calc(1500px * 8);
50	animation: 60s linear infinite;
51	height: 700px;
52}
53.container .loop-box li {
54	display: flex;
55	align-items: flex-end; 
56	justify-content: center;
57	color: #fff;
58	width: calc(100% / 8);
59	height: 700px;
60}
61.container .loop-box img {
62	width: 100%;
63	height: auto;
64}
65.loop-box ul.loop1 {
66	animation-name: loop1;
67}
68.loop-box ul.loop2 {
69	animation-name: loop2;
70}
71@keyframes loop1 {
72	0% {transform: translateX(0); }
73	49.99999% {transform: translateX(-100%); }
74	50% {transform: translateX(100%);}
75}
76@keyframes loop2 {
77	0% {transform: translateX(100%); }
78	100%{transform: translateX(-100%); }
79}
80
81
82</style>
83
84<body>
85
86<div class="top">
87<div class="container">
88<div class="slider">
89<div class="slider-box">
90<div class="loop-box">
91<ul class="loop1">
92<li><img src="./img/top/slider1.png" /></li>
93<li><img src="./img/top/slider2.png" /></li>
94<li><img src="./img/top/slider3.png" /></li>
95<li><img src="./img/top/slider4.png" /></li>
96<li><img src="./img/top/slider5.png" /></li>
97<li><img src="./img/top/slider6.png" /></li>
98<li><img src="./img/top/slider7.png" /></li>
99<li><img src="./img/top/slider8.png" /></li>
100</ul>
101<ul class="loop2">
102<li><img src="./img/top/slider1.png" /></li>
103<li><img src="./img/top/slider2.png" /></li>
104<li><img src="./img/top/slider3.png" /></li>
105<li><img src="./img/top/slider4.png" /></li>
106<li><img src="./img/top/slider5.png" /></li>
107<li><img src="./img/top/slider6.png" /></li>
108<li><img src="./img/top/slider7.png" /></li>
109<li><img src="./img/top/slider8.png" /></li>
110</ul>
111</div>
112</div>
113</div>
114</div>
115</div>
116
117</body>
118