text-shadowがgooglechromeに反映されません

前提・実現したいこと

様々なブラウザでトップフラッシュ画像内の
テキストが見辛いのでテキストを見やすくしたいのです。

発生している問題・エラーメッセージ

text-shadowでテキストを見やすくしたいのですが
edge,ieには反映し、googlechrome,firefox,safari
には反映されません。お手数ですがご回答よろしくお願い致します。

該当のソースコード

html
1
2</header>
3<main class="l-main" role="main">
4        <div id="js-index-slider" class="p-index-slider" data-speed="8000">
5                <div class="p-index-slider__item">
6          <div class="p-index-slider__item-content">
7            <div>
8                            <h2 class="p-index-slider__item-title">お留守番なんて言わないで♪</h2>
9                                          <p class="p-index-slider__item-desc">喜ぶ愛犬と最高の思い出</p>
10                          </div>
11          </div>
12                    <div class="p-index-slider__item-img p-index-slider__item-img--fixed" style="background-image: url(https://pw-hakuba.jp/wp-content/uploads/2019/12/h_m1.jpg);"></div>
13                  </div>
14                <div class="p-index-slider__item">
15          <div class="p-index-slider__item-content">
16            <div>
17                            <h2 class="p-index-slider__item-title">世界最高峰の雪質を誇る</h2>
18                                          <p class="p-index-slider__item-desc">白銀のプラチナパウダースノー</p>
19                          </div>
20          </div>
21                    <div class="p-index-slider__item-img p-index-slider__item-img--fixed" style="background-image: url(https://pw-hakuba.jp/wp-content/uploads/2019/12/h_m5.jpg);"></div>
22                  </div>
23                <div class="p-index-slider__item">
24          <div class="p-index-slider__item-content">
25            <div>
26                            <h2 class="p-index-slider__item-title">本格ログハウスで美食を味わう</h2>
27                                          <p class="p-index-slider__item-desc">大自然の恵みで育まれた<br/>
28鮮度抜群の信州産食材を贅沢に堪能</p>
29                          </div>
30          </div>
31                    <div class="p-index-slider__item-img p-index-slider__item-img--fixed" style="background-image: url(https://pw-hakuba.jp/wp-content/uploads/2019/12/h_m3.jpg);"></div>
32                  </div>
33

試したこと

.p-index-slider__item-desc{ color:inherit; text-shadow:1px 2px 3px #808080 !important; }
.p-index-slider__item-title{ color:inherit; text-shadow:1px 2px 3px #808080 !important; }

※こちらのclassに対してcssを追加致しました。

補足情報（FW/ツールのバージョンなど）

「KADAN」(tcd056)というテーマを使用し作業しています。
サイトはこちらです。https://pw-hakuba.jp/

m.ts10806

2019/12/04 11:26

コードはマークダウンのcode機能を利用してご提示ください。また、htmlもご提示願います（※それがあれば基本的にサイトURLの提示は不要です）今回の内容だけだと「PHP」は関係なさそうなのでタグは外しおいても差し支えないかと思います。あと、 >googlechromeに反映されませんとありますが、他のブラウザでは反映されるということでしょうか。 GoogleChromeもあくまでブラウザの一種なので、表現の仕方で伝わり方が全く違ってきます。問題切り分けのためにEdge以外も幾つかブラウザを試してみてください。

kyoya0819

2019/12/04 12:01

m.ts10806さんの補足で、試して欲しい主要ブラウザは Edge, IE, Chrome, FireFox, Opera, (Safari)らへんです。全てとは言いませんが可能な範囲でテストしていただけるとありがたいです。

TDQ

2019/12/05 03:36

ご丁寧に質問方法などもご指示頂きまして、本当に感謝致します。

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

回答1件

ベストアンサー

ソースを拝見した限り、

CSS
1.p-index-slider__item-desc{ color:inherit; text-shadow:1px 2px 3px #808080 !important; }
2.p-index-slider__item-title{ color:inherit; text-shadow:1px 2px 3px #808080 !important; }.p-index-slider__item-title{
3text-shadow: 0 -1px 1px #000000,
4-1px 0 1px #000000,
51px 0 1px #000000,
60 1px 1px #000000,
71px 1px 1px #ffffff,
82px 2px 2px #ffffff,
93px 3px 3px #ffffff;
10font-weight: bold;
11color: #ffffff
12}

と、!important規則を使っているので、そちらのスタイルが優先されているのではないでしょうか。

質問の変更に合わせて追記

ご提示のサイトのCSSを抜粋して整形すると↓こんな感じです。

css
1@keyframes sliderContentAnimation1{
2  from{
3    opacity: 0;
4    text-shadow: 0 0 20px #ffffff;
5  }
6  to{
7    opacity: 1;
8    text-shadow: 0 0 0 #ffffff;
9  }
10}
11.p-index-slider__item:nth-child(1).slick-active .p-index-slider__item-title{
12  animation: sliderContentAnimation1 1.2s ease forwards 2s;
13  transform: translateZ(0);
14}
15.p-index-slider__item-title{
16  color:inherit;
17  text-shadow:1px 2px 3px #808080 !important;
18}

text-shadowをCSSアニメさせているところ、!important規則でアニメーションを強制無効にしている感じです。Firefoxは!importantが優先されてCSSアニメーションが無効になっていましたが、ChromeはCSSアニメーションが優先されて!importantが無効化されていました。

わかりやすいサンプルを置いておきます。
サンプル

html
1<p>
2test
3</p>
4<p>
5test
6</p>

css
1p{
2  animation: test 1.2s ease forwards 2s;
3}
4@keyframes test {
5  0% { color: #f00 }
6  100% { color: #000 }
7}
8p{
9  color: #00f ;
10}
11p+p{
12  color: #00f !important;  
13}

ChromeとFirefoxでは動作が違っているかと思います。

さてそれで、どちらが正しいのか、という話になりますが、CSS3の仕様書によりますと、

The origin of a declaration is based on where it comes from and its importance is whether or not it is declared !important (see below). The precedence of the various origins is, in descending order:

Transition declarations [css-transitions-1]
Important user agent declarations
Important user declarations
Important author declarations
Animation declarations [css-animations-1]
Normal author declarations
Normal user declarations
Normal user agent declarations

Declarations from origins earlier in this list win over declarations from later origins.

Origin and Importance | CSS Cascading and Inheritance Level 3

と、ありますから、CSSアニメーションより`!important`が優先されるべきで、Chromeのバグだろうと思います。

さて、具体的な解決方法ですが、キーフレームからtext-shadowの部分を削除してしまえばいいかと思います。どうせ!importantによって無効になるのですから、消してしまっても問題はないはずです。

css
1@keyframes sliderContentAnimation1{
2  from{
3    opacity: 0;
4  }
5  to{
6    opacity: 1;
7  }
8}

投稿2019/12/10 07:30

編集2019/12/10 10:15

Lhankor_Mhy

総合スコア36930

TDQ

2019/12/10 07:45

ご回答本当にありがとうございます。大変失礼致しました、質問をしている途中にいろいろ試してしまい試したことの内容が間違っておりました、!importantを使っても、やはりgooglechrome,firefox,safariには反映しません... 試したことのカテゴリーを変更致しましたので、よろしくお願い致します。