Safariでアニメーションが動かない

Chromeではアニメーションが動くのですが、
Safari(MacBook Pro１３inch)で
アニメーションが動かないのを解決したいです。

iphone11proでは、動きました。

お分かりになる方いらっしゃいましたら、
ご教授お願い致します。

対象ページ
https://sample1.veronica9.com/concept/

PHP
1<?php get_header(); ?>
2<div class="header-box"></div>
3<div class="page_head js-animation">
4	<h1>コンセプト</h1>
5	<p>「お食事を大切にすることは、自分自身を大切にすること」<br>
6		この理念に全ての想いが入っています。<br>
7			 毎日のごはんが、日々の幸せに繋がっていきます。</p>
8</div>
9<div class="page_head_img">
10<img src="https://sample1.veronica9.com/wp-content/uploads/2021/06/4.jpg" alt="" class="js-animation_left">
11</div>
12<div class="page_contents js-animation">
13	<p>発酵食、無添加、ホールフード、オーガニック、そしてサステナブル。<br>
14		未来の明るい世界を意識した、お食事方法を大切にしています。</p></div>
15<div class="page_contents_left_img js-animation_right">
16<img src="https://sample1.veronica9.com/wp-content/uploads/2021/06/4.jpg" alt=""></div>
17<div class="page_contents js-animation">
18	<p>お料理が苦手でも、感動するほどのごはんを作れるように。<br>
19		自信溢れる豊かな人生を切り開いていきます。</p></div>
20<div class="page_head_img">
21<img src="https://sample1.veronica9.com/wp-content/uploads/2021/06/4.jpg" alt="" class="js-animation_left">
22</div>
23<div class="page_contents_center js-animation">
24	<p>発酵を取り入れた毎日のお食事で、<br>
25		あなたの人生は、どんどん変わります。</p></div>
26<?php get_footer(); ?>

CSS
1.js-animation {
2    opacity: 0;
3    visibility: hidden;
4    -webkit-transform: translateY(10px);
5        -ms-transform: translateY(10px);
6            transform: translateY(10px);
7    -webkit-transition: all 2s;
8    -o-transition: all 2s;
9    transition: all 2s;
10}
11
12.js-animation.is-show {
13    opacity: 1;
14    visibility: visible;
15    -webkit-transform: translateY(0px);
16        -ms-transform: translateY(0px);
17            transform: translateY(0px);
18}
19
20.js-animation_left {
21    opacity: 0;
22    visibility: hidden;
23    -webkit-transition: all 2s;
24    -o-transition: all 2s;
25    transition: all 2s;
26
27    -webkit-transform: translateX(-150px);
28
29        -ms-transform: translateX(-150px);
30
31            transform: translateX(-150px)
32}
33
34.js-animation_left.is-show {
35    opacity: 1;
36    visibility: visible;
37    -webkit-transform: translateX(0);
38        -ms-transform: translateX(0);
39            transform: translateX(0);
40}
41
42.js-animation_right {
43    opacity: 0;
44    visibility: hidden;
45    -webkit-transform: translateX(150px);
46        -ms-transform: translateX(150px);
47            transform: translateX(150px);
48    -webkit-transition: all 2s;
49    -o-transition: all 2s;
50    transition: all 2s;
51}
52
53.js-animation_right.is-show {
54    opacity: 1;
55    visibility: visible;
56    -webkit-transform: translateX(0);
57        -ms-transform: translateX(0);
58            transform: translateX(0)
59}
60
61.page_head {
62    width: 69%;
63    margin: auto;
64    margin-top: 100px;
65}
66
67.page_head h1 {
68    margin: 0 0 1em;
69    font-size: 2.2rem;
70    font-weight: normal;
71}
72
73.page_head h1:before {
74    position: relative;
75    padding-right: 10px;
76    left: 0;
77    top: 3px;
78    content: "";
79    display: inline-block;
80    width: 0.9em;
81    height: 0.9em;
82    background: url(https://sample1.veronica9.com/wp-content/uploads/2021/06/mark2.svg) no-repeat;
83    background-size: contain;
84}
85
86.page_head p {
87    line-height: 2.5;
88    font-size: 1.15rem;
89}
90
91.page_head_img {
92    width: 85%;
93    margin-top: 100px;
94    margin-left: auto;
95}
96
97.page_contents {
98    width: 69%;
99    margin: auto;
100    margin-top: 100px;
101    font-size: 1.15rem;
102    line-height: 3.5;
103}
104
105.page_contents_left_img {
106    width: 80%;
107    margin-top: 100px;
108    margin-right: auto;
109}
110
111
112.page_contents_center {
113    width: 69%;
114    margin: auto;
115    margin-top: 100px;
116    font-size: 1.15rem;
117    line-height: 3.5;
118    text-align: center;
119}

JavaScript
1<script type="text/javascript">
2/**
3 * 到達したら要素を表示させる
4 */
5function showElementAnimation() {
6
7  var element = document.getElementsByClassName('js-animation');
8  if(!element) return; // 要素がなかったら処理をキャンセル
9  
10  var showTiming = window.innerHeight > 768 ? 200 : 40; // 要素が出てくるタイミングはここで調整
11  var scrollY = window.pageYOffset;
12  var windowH = window.innerHeight;
13
14  for(var i=0;i<element.length;i++) { var elemClientRect = element[i].getBoundingClientRect(); var elemY = scrollY + elemClientRect.top; if(scrollY + windowH - showTiming > elemY) {
15      element[i].classList.add('is-show');
16    } else if(scrollY + windowH < elemY) {
17      // 上にスクロールして再度非表示にする場合はこちらを記述
18      element[i].classList.remove('is-show');
19    }
20  }
21}
22showElementAnimation();
23window.addEventListener('scroll', showElementAnimation);
24</script>
25<noscript>
26  <style>
27  .js-animation {
28    opacity: 1;
29    visibility: visible;
30    transform: translateY(0px);
31  }
32  </style>
33</noscript>
34<script type="text/javascript">
35/**
36 * 到達したら要素を表示させる
37 */
38function showElementAnimation() {
39
40  var element = document.getElementsByClassName('js-animation_left');
41  if(!element) return; // 要素がなかったら処理をキャンセル
42  
43  var showTiming = window.innerHeight > 768 ? 200 : 40; // 要素が出てくるタイミングはここで調整
44  var scrollY = window.pageYOffset;
45  var windowH = window.innerHeight;
46
47  for(var i=0;i<element.length;i++) { var elemClientRect = element[i].getBoundingClientRect(); var elemY = scrollY + elemClientRect.top; if(scrollY + windowH - showTiming > elemY) {
48      element[i].classList.add('is-show');
49    } else if(scrollY + windowH < elemY) {
50      // 上にスクロールして再度非表示にする場合はこちらを記述
51      element[i].classList.remove('is-show');
52    }
53  }
54}
55showElementAnimation();
56window.addEventListener('scroll', showElementAnimation);
57</script>
58<noscript>
59  <style>
60  .js-animation_left {
61    opacity: 1;
62    visibility: visible;
63    transform: translateX(0px);
64  }
65  </style>
66</noscript>
67<script type="text/javascript">
68/**
69 * 到達したら要素を表示させる
70 */
71function showElementAnimation() {
72
73  var element = document.getElementsByClassName('js-animation_right');
74  if(!element) return; // 要素がなかったら処理をキャンセル
75  
76  var showTiming = window.innerHeight > 768 ? 200 : 40; // 要素が出てくるタイミングはここで調整
77  var scrollY = window.pageYOffset;
78  var windowH = window.innerHeight;
79
80  for(var i=0;i<element.length;i++) { var elemClientRect = element[i].getBoundingClientRect(); var elemY = scrollY + elemClientRect.top; if(scrollY + windowH - showTiming > elemY) {
81      element[i].classList.add('is-show');
82    } else if(scrollY + windowH < elemY) {
83      // 上にスクロールして再度非表示にする場合はこちらを記述
84      element[i].classList.remove('is-show');
85    }
86  }
87}
88showElementAnimation();
89window.addEventListener('scroll', showElementAnimation);
90</script>
91<noscript>
92  <style>
93  .js-animation_right {
94    opacity: 1;
95    visibility: visible;
96    transform: translateX(0px);
97  }
98  </style>
99</noscript>

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

回答1件

ベストアンサー

私のMacでは動いてますけどね？OSは最新ではないのですが。

MacBook Pro 13inch
OS: Catalina 10.15.7

投稿2021/06/10 16:28

runnynose

総合スコア497

code_mate

2021/06/10 17:01

ご回答ありがとうございます。当方でも・google chrome（windows10）PC ・Microsoft edge（windows10）PC ・ios (i phone 11pro) ・android chrome スマホ・safari（i pad）でアニメーションの動作が確認できました。ですので、個人のMac book proのsafariのOS等の問題かと思われます。こちらのコードの問題ではなさそうですので、解決出来ました。どうもありがとうございました。

code_mate

2021/06/10 17:01

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