回答編集履歴
1
コメントなど調整
test
CHANGED
|
@@ -4,11 +4,13 @@
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
この問題は（対症療法的ですが）`will-change:contents`を指定し, WEBブラウザ側に「アニメーションの準備」を意識させる(アクセラレーションを常に有効化)ことで解決しました.
|
|
7
|
+
この問題は（対症療法的ですが）`will-change:contents`を指定し, WEBブラウザ側に「アニメーションの準備」を意識させる(`a`要素のレンダリングに際しアクセラレーションを常に有効化する)ことで解決しました.
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
```
|
|
11
|
+
```CSS
|
|
12
|
+
|
|
13
|
+
/*styles.cssより抜粋*/
|
|
12
14
|
|
|
13
15
|
.btn01 a, .btn02 a, .btn03 a, .btn04 a, .btn05 a, .btn06 a, .btn07 a {
|
|
14
16
|
|
|
@@ -26,7 +28,7 @@
|
|
|
26
28
|
|
|
27
29
|
padding: .8em 1.6em;
|
|
28
30
|
|
|
29
|
-
transition: .3s ease-in-out;
|
|
31
|
+
transition: .3s ease-in-out;/*ここにアニメーションの設定がある*/
|
|
30
32
|
|
|
31
33
|
color: #fff;
|
|
32
34
|
|
|
@@ -36,7 +38,21 @@
|
|
|
36
38
|
|
|
37
39
|
}
|
|
38
40
|
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
.btn01 a:hover {
|
|
44
|
+
|
|
45
|
+
transform: translateY(3px);/*ここをアニメーション化するとハードウェアアクセラレーションが有効となる*/
|
|
46
|
+
|
|
47
|
+
}
|
|
48
|
+
|
|
39
49
|
```
|
|
50
|
+
|
|
51
|
+
NOTE:
|
|
52
|
+
|
|
53
|
+
なお, `will-change`プロパティを多用するとシステムに負荷が掛かるため, 理想としては問題の根本を取り除くべきでしょう.
|
|
54
|
+
|
|
55
|
+
|
|
40
56
|
|
|
41
57
|
参考
|
|
42
58
|
|