splideで作成したスライダーの連番がiOSだと「01」から始まらない

Question

実現したいこと

iOS端末でも擬似要素で作成している「01」「02」のような連番を正しく表示したいです。

発生している問題・分からないこと

スライダーライブラリのsplideを使用して次のようなスライダーを作成しました。
・PCページでは1スライド内に2行3列の合計6項目表示。スライドすると6項目全て移動して次の6項目が表示される。
・SPページでは1画面に1項目表示させ、前後の項目を見切れさせる。
・PC・SP共通して擬似要素で「01」「02」「03」のように連番を振っている。

作成したスライダーをChromeで確認するとPC・SPどちらも問題なく表示されているようなのですが、safariで表示した場合、SPページの方の連番が08から始まってしまいます。

※念の為codepenにて実装したものも貼っておきます。
https://codepen.io/k_2024/pen/xxvgQwP

エラーメッセージ

コンソールにエラーメッセージは表示されませんでした。

該当のソースコード

<section>
		<div class="container">
			<div class="text-contents">
				<div class="splide-container">
					<div class="splide">
						<div class="splide__track">
						  <ul class="splide__list">
							<li class="splide__slide">
								<dl>
									<dt>
										見出し1
									</dt>
									<dd>
										内容内容内容内容内容内容内容内容
									</dd>
								</dl>
							</li>
							<li class="splide__slide">
								<dl>
									<dt>
										見出し2
									</dt>
									<dd>
										内容内容内容内容内容内容内容内容
									</dd>
								</dl>
							</li>
							<li class="splide__slide">
								<dl>
									<dt>
										見出し3
									</dt>
									<dd>
										内容内容内容内容内容内容内容内容
									</dd>
								</dl>
							</li>
							<li class="splide__slide">
								<dl>
									<dt>
										見出し4
									</dt>
									<dd>
										内容内容内容内容内容内容内容内容
									</dd>
								</dl>
							</li>
							<li class="splide__slide">
								<dl>
									<dt>
										見出し5
									</dt>
									<dd>
										内容内容内容内容内容内容内容内容
									</dd>
								</dl>
							</li>
							<li class="splide__slide">
								<dl>
									<dt>
										見出し6
									</dt>
									<dd>
										内容内容内容内容内容内容内容内容
									</dd>
								</dl>
							</li>
							<li class="splide__slide">
								<dl>
									<dt>
										見出し7
									</dt>
									<dd>
										内容内容内容内容内容内容内容内容
									</dd>
								</dl>
							</li>
							<li class="splide__slide">
								<dl>
									<dt>
										見出し8
									</dt>
									<dd>
										内容内容内容内容内容内容内容内容
									</dd>
								</dl>
							</li>
							<li class="splide__slide">
								<dl>
									<dt>
										見出し9
									</dt>
									<dd>
										内容内容内容内容内容内容内容内容
									</dd>
								</dl>
							</li>
							<li class="splide__slide">
								<dl>
									<dt>
										見出し10
									</dt>
									<dd>
										内容内容内容内容内容内容内容内容
									</dd>
								</dl>
							</li>
						  </ul>
						</div>
						<div class="splide__arrows">
							<button class="splide__arrow splide__arrow--prev button prev"></button>
							<button class="splide__arrow splide__arrow--next button next"></button>
						</div>
					</div>
				</div>				
			</div>
		</div>
	</section>

section{
	position: relative;
	margin-bottom: 120px;
	padding: 115px 0 125px;

	.container{
		.text-contents{
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex-wrap: nowrap;
			
			.splide-container{
				width: 100%;
				max-width: 800px;
				margin: 0 auto;
			
				.splide{
					.splide__track{
						.splide__list{
							counter-reset: point;
			
							.splide__slide{
								.splide__slide__row{
									.splide__slide{
										display: flex;
										flex-direction: column;
										flex-wrap: nowrap;
										position: relative;
										width: calc((100% - 30px) / 3) !important;
										margin: 0 5px 5px;
										padding: 20px 20px 40px;
										background: #fff;
										color: #000;
										border: 1px solid;
			
										&::before{
											content: counter(point, decimal-leading-zero);
											display: block;
											position: relative;
											margin-bottom: 5px;
											color: #FF0000;
											font-size: 2rem;
											font-weight: 400;
											text-align: center;
											letter-spacing: .1em;
											counter-increment: point;
										}
			
										dl{
											dt {
												position: relative;
												margin-bottom: 20px;
												font-size: 2rem;
												font-weight: 700;
												letter-spacing: .1em;
												text-align: center;
												line-height: 1.4;
											}
								
											dd {
												font-size: 1.5rem;
												font-weight: 400;
												line-height: 1.7;
												letter-spacing: .1em;
											}
										}
									}
								}
							}
						}
					}
			
					.button {
						background: none;
						height: 50px;
						width: 50px;
					}
					
					.button::before {
						content: "";
						display: block;
						position: absolute;
						width: 50px;
						height: 50px;
						margin: auto;
					}
					
					.prev{
						left: -25px;
			
						&:before{
							top: 50%;
							content: '<';
						}
					}
			
					.next{
						right: -25px;
			
						&:before{
							top: 50%;
							content: '>';
						}
					}
					
					.button:disabled::before {
						opacity: .5;
					}
				}
			}
		}
	}
}

@media screen and (max-width: 959px){
/* ------------------------------------------------------*/

section{
	margin-bottom: 60px;
	padding: 55px 0 65px;

	&::before{
		width: 100vw;
	}

	.container{
		.text-contents{
			width: 100%;

			.splide-container{
				.splide{
					.splide__track{
						overflow: visible;
		
						.splide__list{
							.splide__slide{
								height: auto;
								padding: 20px 15px;
								background: #fff;
								color: #000;
								border: 1px solid;
		
								&::before{
									content: counter(point, decimal-leading-zero);
									display: block;
									position: relative;
									margin-bottom: 5px;
									color: #FF0000;
									font-size: 2rem;
									font-weight: 400;
									text-align: center;
									letter-spacing: .1em;
									counter-increment: point;
								}
		
								@for $i from 1 through 7 {
									&:nth-of-type(#{$i}) {
										counter-reset: point #{$i - 1};
									}
								}
		
								dl{
									dt {
										position: relative;
										margin-bottom: 20px;
										font-size: 2rem;
										font-weight: 700;
										letter-spacing: .1em;
										text-align: center;
									}
						
									dd {
										font-size: 1.5rem;
										font-weight: 400;
										line-height: 1.7;
										letter-spacing: .1em;
									}
								}
							}
						}
					}

					.splide__arrows{
						.prev{
							left: 0;
						}

						.next{
							right: 0;
						}
					}
				}
			}
		}
	}
}
}

$(function() {
	// Splide
	new Splide('.splide', {
		type: 'slide',
		pagination: false,
		perPage: 1,
		perMove: 1,
		grid: {
			rows: 2,
			cols: 3,
		},
		breakpoints: {
			959: {
				type: 'loop',
				grid: {
					rows: 1,
					cols: 1
				},
				padding: "20%",
				gap: 20,
				clones: 7
			}
		}
	}).mount(window.splide.Extensions);

	if (window.matchMedia("screen and (max-width: 959px)").matches) {
	}
});

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

javascript内のclonesの値を調整すれば解決するかと思ったのですが、clonesの設定をコメントアウトすると、前後のクローンの数を取得してしまい、最初の要素の番号が「03」と表示されてしまいます。

補足

特になし

Comments

[Lhankor_Mhy]

ご提示のcodepenを試してみたところ、Firefoxのdevtoolsでレスポンシブデザインモードにすると、08がセンターにありました。ご参考までに。

[Lhankor_Mhy]

Chrome のバグか、Chrome 以外のバグかのどっちかだと思います。

Answer 1

以下を

@for $i from 1 through 7 {
    &:nth-of-type(#{$i}) {
        counter-reset: point #{$i - 1};
    }
}

以下に変更するといいのかもしれません。

&:nth-of-type(8) {
    counter-set: point 0;
}