css3を組み合わせた時のieのバグについて

#掲題
ie11でfilterのボカシは使えないため以下のcssを組み合わせることによって疑似的にボカシを再現しました。
・rgba
・text-shadow

##処理
「main_txt」idの下のh3、pタグをcolor: rgba(255, 255, 255, 0);にして「main_txt」idにjqueryでscrollした際に「main_txt」idにtext-shadowの量を増やしていく事とによってボカシ風にしています。

##問題
ほかのブラウザ(edgeやchrome)では思った通りに動かせる事が出来たのですがieのみcolor: rgba(255, 255, 255, 0);にするとtext-shadow毎消えてしまいます。
またrgbaを外した状態で確認してみても、text-shadowの効きが悪い気がしています(他ブラウザと比べて)

##試したこと
rgba(255, 255, 255, 0);が悪いのかと思いtransparentにしてみましたが結果変わらずにtext-shadowも消えてしまいます。
上手く説明できていないかもしれませんが、回答よろしくお願いします。

html
1 <div class="txt_wrap" id="main_txt">
2      <h3>test</h3>
3      <p>testtesttesttest<br>testtesttest</p>
4    </div>

css
1 .main .txt_wrap {
2   position: absolute;
3   right: 2.562%;
4   top: 50%;
5   transform: translateY(-50%);
6   color: #fff;
7   z-index: 100;
8   text-align: right;
9 }
10 
11 .main .txt_wrap>h3 {
12   font-size: 97px;
13   line-height: 1;
14   margin-bottom: 15px;
15 }
16
17 .main .txt_wrap>h3:first-letter {
18   font-size: 131%;
19 }
20 .main .txt_wrap p {
21   font-size: 16px;
22   line-height: 1.6;
23 }
24
25 .main .txt_wrap.blur>h3 {
26   color: rgba(255, 255, 255, 0);
27 }
28
29 .main .txt_wrap.blur p {
30   color: rgba(255, 255, 255, 0);
31 }

js
1    var $main_txt =$("#main_txt");
2	$(window).on("scroll",function(){
3		var sct = $(this).scrollTop();
4		//console.log("rgb(255, 255, 255) 0px 0px" + sct + "px");
5		
6		if (sct > 25){
7			//25よりスクロール量が多ければtrue
8		   $main_txt.addClass("blur").css({"text-shadow":"rgb(255, 255, 255) 0px 0px " + sct * 0.13 + "px"});
9		   }else{
10			   $main_txt.removeClass("blur").removeAttr('style');
11		   }
12		
13		});

m.ts10806

2020/05/22 20:51

JavaScriptは本件とどう関係するのでしょうか。まずは静的HTMLで試してみては。

web11

2020/05/23 01:59 編集

変化の度合いを確認するためにjsを入れております。またjsを入れずにtransitionを使って確認した場合も同様の現象が起きると思うのですが。

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

回答2件

ベストアンサー

IEはtext-shadowにおける「正規のテキスト」と「シャドウ用」のテキストに適用するcolorが同一なのでcolorにtransparentを設定するとシャドウ用のテキストも透明になってしまうようです。
他のブラウザでは「正規のテキスト」と「シャドウ用のテキスト」に適用するcolorが厳密には異なるので正規のテキストだけ透明にすることができる、と。
バグかどうかは何とも言えません。多分こんな細かいことはcssの仕様にも書いていないのでは。

で、解決策としては、IE側のスタイルに謎の第4数値項目（spread）を設定すると正規テキストとシャドウ用テキストのcolorスタイルが分離されて他ブラウザと同じ挙動にすることができました。

参考：Transparent text with text-shadow in IE

spreadに対応するブラウザは現状IEだけなので他のブラウザで同様の指定をするとエラーとなりtext-shadowそのものが無効になります。~~なのでIEかどうかを検知して処理を分岐させる必要があります。そこは質問者のほうでなんとかできると思うので頑張ってください。~~
追記：参考資料を見直したらstyleを適用する順番でブラウザハックができるそうなので検証ソースも修正しました。IE用を後に設定すると他ブラウザでは指定が無効になるのでOKだそうな。

以下、検証用ソース。IE11とChromeで動作確認。

html
1<html>
2
3  <head>
4
5    <style type="text/css">
6      .main {
7        background-color: #123;
8        height: 1280px;
9
10      }
11
12      .main .txt_wrap {
13        position: absolute;
14        right: 2.562%;
15        top: 50%;
16        transform: translateY(-50%);
17        color: #fff;
18        z-index: 100;
19        text-align: right;
20      }
21
22      .main .txt_wrap>h3 {
23        font-size: 97px;
24        line-height: 1;
25        margin-bottom: 15px;
26      }
27
28      .main .txt_wrap>h3:first-letter {
29        font-size: 131%;
30      }
31
32      .main .txt_wrap p {
33        font-size: 16px;
34        line-height: 1.6;
35      }
36
37      .main .txt_wrap.blur>h3 {
38        color: rgba(255, 255, 255, 0);
39      }
40
41      .main .txt_wrap.blur p {
42        color: rgba(255, 255, 255, 0);
43      }
44
45    </style>
46
47    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
48
49    <script>
50      $(window).on("scroll", function() {
51        var main_txt = $("#main_txt");
52        var sct = $(this).scrollTop();
53        console.log("rgb(255, 255, 255) 0px 0px" + sct + "px");
54
55        if (sct > 25) {
56          //25よりスクロール量が多ければtrue
57          // ohter UA
58          main_txt.addClass("blur").css({
59            "text-shadow": "rgb(255, 255, 255) 0px 0px " + sct * 0.13 + "px"
60          });
61          //>=IE10 only
62          main_txt.addClass("blur").css({
63            "text-shadow": "rgb(255, 255, 255) 0px 0px " + sct * 0.13 + "px 0.01em"
64          });
65          //$('#main_txt').addClass("blur").css({"text-shadow":"rgb(255, 255, 255) 0px 0px " + sct * 0.13 + "px"});
66
67        } else {
68          main_txt.removeClass("blur").removeAttr('style');
69          //$('#main_txt').removeClass("blur").removeAttr('style');
70        }
71        console.log(main_txt.hasClass("blur"));
72
73      });
74
75    </script>
76
77  </head>
78
79  <body>
80
81    <div class="main">
82      <div class="txt_wrap" id="main_txt">
83        <h3>test</h3>
84        <p>testtesttesttest<br>testtesttest</p>
85      </div>
86
87    </div>
88
89
90  </body>
91
92</html>