transformを設定したテキストが、マウスオンでぶれてしまう

前提・実現したいこと

transformを設定したテキストが、なぜかマウスオンでぶれてしまうことに気づきました。
ぶれるのはプルダウンメニューについているTEST2のテキストです。
ぶれないようにするにはどうしたらいいでしょうか？
下のURLで表示されます。

https://thimbleprojects.org/lastmemoria/657528/

ナビのborderは斜線で表示して、テキストはまっすぐに表示したいのでそういう記述をしています。

※3/20 追記

ぶれ自体は「li.menu__single ul.menu__second-level {」内のtransition記述を消すことで
改善することを確認しましたが、代わりにドロップダウンのふわっとした出方が消えました。
できればドロップダウンのアニメーションも残したいと思っています。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <title>Thimble Sample</title>
7    <link rel="stylesheet" href="style.css">
8  </head>
9  <body>
10  
11    <div id="gloval-nav">
12      <ul class="menu">
13        <li class="menu__single">
14          <a href="#" class="init-bottom">TEST1</a></li>
15        <li class="menu__single">
16          <a href="#" class="init-bottom">TEST2</a>
17          <ul class="menu__second-level">
18            <li class="a"><a href="#">test</a></li>
19            <li class="a"><a href="#">test</a></li>
20            <li class="a"><a href="#">test</a></li>
21          </ul>
22        </li>
23        <li class="menu__single">
24          <a href="#" class="init-bottom">TEST3</a></li>
25      </ul>
26    </div>
27    
28  </body>
29</html>

CSS
1.menu {
2  position: relative;
3  width: 100%;
4  max-width: 480px; /* 600 */
5  margin: 0 auto;
6  font-size: 20px;
7}
8
9.menu > li {
10  float: left;
11  width: 33%;
12  display:table-cell;
13  vertical-align:middle;
14  text-align:center;
15  -webkit-transform: skewX(-145deg);
16  -moz-transform: skewX(-145deg);
17  transform: skewX(-145deg);
18  border-right: 1px solid #000;
19  border-left: 1px solid #000;
20}
21
22.menu > li+li {
23  border-left: 0;
24  border-right: 1px solid #333;
25}
26
27.menu > li a {
28  display: block;
29  color: #000;
30  padding:0 15px;
31  text-decoration: none;
32  line-height: 1.2 !important;
33}
34
35.menu > li a.init-bottom {
36  transform: skewX(145deg);
37}
38
39.menu > li a:hover {
40  text-decoration: underline;
41}
42
43ul.menu__second-level {
44  visibility: hidden;
45  opacity: 0;
46  transform: skewX(145deg);
47  text-align:left;
48}
49
50.menu > li.menu__single {
51  position: relative;
52}
53
54li.menu__single ul.menu__second-level {
55  position: absolute;
56  top: 30px;
57  left: -60px;
58  width: 110%;
59  -webkit-transition: all .2s ease !important;
60  transition: all .2s ease !important;
61  transform: skewX(145deg);
62}
63
64li.menu__single:hover ul.menu__second-level {
65  top: 30px;
66  left: -60px;
67  visibility: visible;
68  opacity: 1 !important;
69}
70
71.menu > li:hover {
72  -webkit-transition: all .5s;
73  transition: all .5s;
74}
75
76.menu__second-level li {
77  background-color: rgba(255,255,255,0.7);
78  padding: 5px 0;
79  list-style: none;
80}
81
82/* floatクリア */
83.menu:before,
84.menu:after {
85  content: " ";
86  display: table;
87}
88
89.menu:after {
90  clear: both;
91}
92
93.menu {
94  *zoom: 1;
95}

試したこと

hover時の表示がおかしいので、「.menu > li a:hover {」や「.menu > li:hover {」を修正すれば解決すると思い「.menu > li」と同じ記述をしてみましたが違うようでした。
「.menu > li {」のtransformの記述を消すとぶれはなくなるので
テキストを斜めからまっすぐにしようとする工程にミスがあるのだろうなというのはわかるのですが…。

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

回答2件

ベストアンサー

cssでtransform transition opacityが組み合わさるとよくこのようなことが起きるようですね。
提示されたコードのtransform: skewX(-145deg);がborderを斜めにすることのみが目的のようなので、以下のように擬似要素にその役割を移して書き換えれば、ちらつきはなくなるはずです。（書き換える部分のみ記載します。コメントアウトしてある部分は不要になります。）

css
1.menu > li {
2  float: left;
3  width: 33.33%;	/* 幅の調整 0.33% up */
4  display:table-cell;
5  vertical-align:middle;
6  text-align:center;
7/*  -webkit-transform: skewX(-145deg);
8  -moz-transform: skewX(-145deg);
9  transform: skewX(-145deg);
10  border-right: 1px solid #000;
11  border-left: 1px solid #000;*/
12}
13
14/* 擬似要素を追加 */
15.menu > li::before, .menu > li:last-child::after {
16  display: inline-block;
17  width: 0;
18  height: 100%;
19  content: "";
20  -webkit-transform: skewX(-145deg);
21  -moz-transform: skewX(-145deg);
22  transform: skewX(-145deg);
23  position: absolute;
24  top: 0;
25}
26
27.menu > li::before {
28  border-left: 1px solid #000;
29  left: 0;
30}
31
32.menu > li:last-child::after {
33  border-right: 1px solid #000;
34  right: 0;
35}
36/* 擬似要素ここまで */
37
38/*.menu > li+li {
39  border-left: 0;
40  border-right: 1px solid #333;
41}*/
42
43.menu > li a {
44  display: block;
45  color: #000;
46  padding:0 15px;
47  text-decoration: none;
48  line-height: 1.2 !important;
49}
50
51/*.menu > li a.init-bottom {
52  transform: skewX(145deg);
53}*/
54
55.menu > li a:hover {
56  text-decoration: underline;
57}
58
59ul.menu__second-level {
60  visibility: hidden;
61  opacity: 0;
62/*  transform: skewX(145deg);*/
63  text-align:left;
64}

上記変更に伴い、.menu__second-levelの位置も修正しないといけませんが、そのあたりはご自身で調整なさってください。

投稿2019/03/20 15:15

cerfweb

総合スコア1899

mupo

2019/03/20 16:01

ご回答ありがとうございます。疑似要素についてもっと勉強しようと思います。こちらのやり方で表示がうまくいきました、ありがとうございました！

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

以下を追加してみてください

CSS
1.menu > li {
2  -webkit-backface-visibility:hidden;
3  backface-visibility:hidden;
4}
5
6li.menu__single ul.menu__second-level {
7  -webkit-backface-visibility:hidden;
8  backface-visibility:hidden;
9}

Transformでの文字がにじむ場合の対策です。

投稿2019/03/19 08:27

LibertyBell3

総合スコア1084

mupo

2019/03/19 09:14

ご回答ありがとうございます。追加してみたのですが、直らないようです。 https://thimbleprojects.org/lastmemoria/657528

LibertyBell3

2019/03/19 09:38

Windows/Chromeだと直ってるんですけどね。他にもあるので、「CSS Transform にじむ」でググると出てくると思います。

mupo

2019/03/20 11:41

そうなんですね。こちらwindowsのfirefoxで見ていたのですが直っていませんでした。 Transformでぐぐってみて追記してもなおらず、色々試していて「ul.menu__second-level」内のtransitionをコメントアウトしてみたらなぜかにじみがなおりました。ドロップダウンがふわっと出る挙動がなくなってしまったのは残念なのですが、ありがとうございました。

LibertyBell3

2019/03/20 21:26

対策できたようですね。お力になれず申し訳ないです。

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

あなたの回答