Edge、IE11、IE10で途中からアニメーションする時にtransformのrotateがきかない

■動作内容

ある一定のスクロールをすると、.first_boxに追加で新しいクラスが付アニメーションするようになっています。

特定の数値になると追加したクラスが外れ、次のクラスが新しくつきます。
追加されるクラスが変わるたびにアニメーションも変わるようになっています。

■不具合内容

・下にスクロールしてタイトル1のBoxがタイトル2のBoxになる時にEdge、IE11、IE10の場合表示される位置がガクッと下に下がってから移動が始まる

・下にスクロールしてタイトル2のBoxがタイトル3のBoxになる時にEdge、IE11、IE10の場合アニメーションで移動するが、回転をしない

■やった事

・IEのベンダープレフィックスを追加
・position: fixed;を使っているときにIEでスクロールの挙動がおかしくなるので「nicescroll.js」を設置して対応
・Googleで検索したのですが、解決策になるような記事が見つけられませんでした。

以下にソースを張ります。
宜しくお願い致します。

■HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>パララックステスト</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/style.css">

	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="js/animation.js"></script>
	<script src="js/jquery.nicescroll.js"></script>
	<script src="js/jquery.easeScroll.js"></script>

<script>
$(function() {
    $("body").niceScroll();
});
</script>

</head>
<body>
	<article class="first_box">
		<section class="first_text">
			<h1>タイトル１</h1>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</section>
		<section class="second_text">
			<h1>タイトル2</h1>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</section>
		<section class="third_text">
			<h1>タイトル3</h1>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</section>
		<section class="forth_text">
			<h1>タイトル4</h1>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</section>
		<section class="fifth_text">
			<h1>タイトル5</h1>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</section>
	</article>
	<div id="first" class="content">
		<p class="logo">Test x <br class="sp_display">テスト x <br class="sp_display">テキスト</p>
	</div>

	<div id="second" class="content">
	</div>

	<div id="third" class="content">
	</div>
</body>
</html>

■CSS

html {
  margin: 0;
  font-size: 16px;
  font-size: 100%;
  overflow: hidden;
}

body {
    min-width: 320px;
    font-size: 1rem;
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    overflow: auto;
}

img {
	width: 100%;
	height: auto;
}

.sp_display {
  display: none;
}

article h2, article h1 {
  font-size: 3.6em;
  line-height: 1em;
  margin: 25px 0;
}

.content {
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
  color: #333;
  margin: 0 auto;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#first {
  background: url(../img/bg-parallaxsample01.jpg) 50% 0 no-repeat fixed;
  background-size: cover;
}

#second {
  background: url(../img/bg-parallaxsample02.jpg) 50% 0 no-repeat fixed black;
  background-size: cover;
}

#third {
  background: url(../img/bg-parallaxsample03.jpg) 50% 0 no-repeat fixed black;
  background-size: cover;
}

/* section first */
.logo {
  color: rgba(255, 255, 255, 0.9);
  font-size:  3.2em;
  line-height: 1.2;
  font-weight: bold;
  margin: 0;
  position: fixed;
  top: calc(100 / 1920 * 100%);
  left: calc(50 / 1920 * 100%);
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}

.first_box {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(150, 150, 150, 0.1);
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
  padding: 18px;
  position: fixed;
  top: calc(300 / 1920 * 100%);
  width: calc(900 / 1920 * 100%);
  max-width:800px;
  left: -100%;
  transition: all 1s 0s ease;
  z-index: 3;
}

.odd_movie,
.even_movie {
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}

.first_box.right_move {
  left: 10%;
}

.first_box.riguht_doun {
  left:50%;
  top:50%;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(405deg) scale(1.4);
          -ms-transform: translateX(-50%) translateY(-50%) rotate(405deg) scale(1.4);
      transform: translateX(-50%) translateY(-50%) rotate(405deg) scale(1.4);
}

.first_box.left_top {
  left:76%;
  top:0%;
  -webkit-transform:translateX(-50%) translateY(-26%) rotate(0deg);
          -ms-transform:translateX(-50%) translateY(-26%) rotate(0deg);
      transform:translateX(-50%) translateY(-26%) rotate(0deg);
}


.first_box.right_move [class*="_text"],
.first_box.riguht_doun [class*="_text"],
.first_box.left_top [class*="_text"] {
  display: none;
}

.first_box.right_move .first_text,
.first_box.riguht_doun .second_text,
.first_box.left_top .third_text {
  display: block;
}

/* section second */
.second_box {
	position: absolute;
	top: calc(80 / 1150 * 100%);
	background: rgba(51, 51, 51, 0.9);
	border: 1px solid rgba(150, 150, 150, 0.1);
	box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
	color: white;
	margin-left: calc(100 / 1150 * 100%);
	padding: calc(10 / 1150 * 100%) calc(20 / 1150 * 100%);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
	line-height: 1.5em;
	width: calc(445 / 1150 * 100%);
	transition: all 1s 0s ease;
}

/* section third */
.third_box {
	background: rgba(51, 51, 51, 0.9);
	border: 1px solid rgba(150, 150, 150, 0.1);
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
	color: white;
	padding: calc(10 / 1150 * 100%) calc(20 / 1150 * 100%);
	margin: calc(100 / 1150 * 100%) 0 0 60%;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
	line-height: 1.5em;
	color: white;
	position: absolute;
	top: 0;
	right: -50%;
	transition: all 1s 0s ease;
    width: 40%;
}

.third_box.left_move {
	-webkit-transform: translateX(-116%);
	        transform: translateX(-116%);
}


.img_box {
	border: 8px solid white;
	box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
	height: auto;
	width: calc(400 / 1150 * 100%);
	position: absolute;
	left: calc(30 / 1150 * 100%);
	top: 0;
	transition: all 1s 0s ease;
}

.img_box.bottom_move {
	-webkit-transform: translateY(116%) rotate(-12deg);
	        transform: translateY(116%) rotate(-12deg);
}

/* section the end */
#theend h2 {
  color: white;
  font-size: 4em;
  left: 50%;
  margin-left: calc(150 / 1150 * -100%);
  position: absolute;
  text-shadow: 0 0 16px rgba(140, 123, 96, 0.8);
  top: calc(180 / 1150 * 100%);
  width: calc(300 / 1150 * 100%);
}

@media all and (max-width: 1081px) {
  .first_box.right_top {
    width: calc(800 / 1150 * 100%);
  }

}
@media all and (max-width: 768px) {
.sp_display {
  display: block;
}

article h2, article h1 {
  font-size: 1.8em;
}

.first_box {
  top: calc(500 / 1150 * 100%);
  width:90%;
}

.first_box.right_move {
  left:calc(50%);
  -webkit-transform: translateX(-50%);
          transform:translateX(-50%);
}

.first_box.riguht_doun {
  left:calc(50%);
  -webkit-transform:translateX(-50%) translateY(-80%) rotate(-720deg);
          transform:translateX(-50%) translateY(-80%) rotate(-720deg);
}

.first_box.left_top {
  left:calc(50%);
  -webkit-transform:translateX(-50%) translateY(0%) rotate(720deg);
          transform:translateX(-50%) translateY(0%) rotate(720deg);
}

}

■JS

$(function(){
    var imgTopImgBox = $("#first").offset().top;
    var imgTopSecond = $("#second").offset().top;
    var imgTopThird = $("#third").offset().top;
    var difference = imgTopSecond/1.2;
	var windowWidth = $(window).width();
	var windowHeight = $(window).height();
	var TopClass = imgTopSecond/3;
    window.onload = function () {
    	var aa = $('.first_box').attr('class');
    	var classVals = aa.split(' ');
    	if(classVals.length <= 1){
   			$('.first_box').addClass('right_move');
		}
	};

	$(window).scroll(function (){
		var scroll = $(window).scrollTop();
		var windowWidth = $(window).width();
		var windowHeight = $(window).height();
		var moveBox = $(".first_box").offset();
	});

	$(window).scroll(function (){
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if(0 <= scroll && scroll < windowHeight){
			$("#first").each(function(){
				if (0 <= scroll && scroll < windowHeight / 4){
					$('.first_box').css("left","");
					$('.first_box').removeClass('riguht_doun');
					$('.first_box').addClass('right_move');
				} else if (scroll > windowHeight / 4){
					$('.first_box').removeClass('right_move');
					$('.first_box').removeClass('left_top');
	    			$('.first_box').addClass('riguht_doun');
				}
			});
		};
		if(scroll >= imgTopSecond - 1 && scroll < imgTopThird){
			$("#second").each(function(){
	    		$('.first_box').removeClass('riguht_doun');
	    		$('.first_box').addClass('left_top');
	    		if(scroll < imgTopForth - difference){
		    		$('.first_box').removeClass('right_top');
		    		$('.first_box').addClass('left_top');
	    		};
	    	})
		};


		if(scroll >= imgTopThird - 1 && scroll < imgTopForth){
			$("#third").each(function(){
	    		$('.first_box').addClass('right_top');
	    		$('.first_box').removeClass('left_top');
	    	})
		};
	});

	//スクロールがゆっくり動く
	$('body').easeScroll({
	  frameRate: 60,
	  animationTime: 2000,
	  stepSize: 120,
	  pulseAlgorithm: 1,
	  pulseScale: 8,
	  pulseNormalize: 1,
	  accelerationDelta: 20,
	  accelerationMax: 1,
	  keyboardSupport: true,
	  arrowScroll: 50,
	  touchpadSupport: true,
	  fixedBackground: true
	});
});

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

回答1件

自己解決

自己解決しました。
■下にスクロールしてタイトル1のBoxがタイトル2のBoxになる時にEdge、IE11、IE10の場合表示される位置がガクッと下に下がってから移動が始まる

IEではCSSの transform() と calc() を合わせた演算結果がブラウザによって異なるらしいので、初期に値に使用していたcalcを普通に%で書くことで解消しました。

.first_box {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(150, 150, 150, 0.1);
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
  padding: 18px;
  position: fixed;
  top: calc(300 / 1920 * 100%);←ここを「calc」ではなく、％で表示
  width: calc(900 / 1920 * 100%);
  max-width:800px;
  left: -100%;
  transition: all 1s 0s ease;
  z-index: 3;
}

■下にスクロールしてタイトル2のBoxがタイトル3のBoxになる時にEdge、IE11、IE10の場合アニメーションで移動するが、回転をしない

これはtransformの「scale」の値を端折っていたのが原因でした。
最初はscaleを1.4で指定してましたが、2回目はscaleの記述を書いていませんでした。
Chromeなどではこの辺書いていなくてもいい感じに1に戻してくれたので特に気にしていませんでしたが、
IEではscaleの記述が入っていないため、回転のアニメーションが動かなくなったようです。

解決策としては、めんどくさがらずに、「それぞれにscaleの値を入れる」です。

.first_box.riguht_doun {
  left:50%;
  top:50%;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(405deg) scale(1.4);
          -ms-transform: translateX(-50%) translateY(-50%) rotate(405deg) scale(1.4);
      transform: translateX(-50%) translateY(-50%) rotate(405deg) scale(1.4);
}

.first_box.left_top {
  left:76%;
  top:0%;
  -webkit-transform:translateX(-50%) translateY(-26%) rotate(0deg);←ここに scale(1)を入れる
          -ms-transform:translateX(-50%) translateY(-26%) rotate(0deg);←ここに scale(1)を入れる
      transform:translateX(-50%) translateY(-26%) rotate(0deg);←ここに scale(1)を入れる
}

投稿2019/07/24 06:12

kusaka00

総合スコア55