サイズのcssがsafariで反映されないのを実務で初めて見た｜実務未経験からWEBエンジニアへの道のり

昨日今日と商品ページのコーディングをして「やっと終わった〜」と思って会社の人に連絡して会社の人が見て「画像が変ですよ」って言われました。

私はchromeで見たのですが画像が変になってなく「おかしいな〜」と思ったら会社の人はsafariで見ていました。

chromeで見た画像、問題ないです

safariで見た画像、変な表示で画像が縦伸びしています

明らかに違いますよね、「恐らくCSSが効いてない」と思いsafariの開発ツールを見ました。

safariの開発ツールの使い方

ブラウザをsafariにして画面左上のメニューのsafari > 環境設定に入ります。

そして↓の画面になるので赤枠をクリックします。

すると画面左上のメニューバーに「開発」が表示されるのでクリックします。

クリックすると↓の画面になるので「Webインスペクタを接続」をクリックします。

クリックすると検証ツールになります、↓の赤枠をクリックすると調べたい物を選べます。

そして問題のある画像を見たらcssが当たってませんでした。

「どうせググれば見つかるでしょ」と思ったらやっぱりありましたがどうもsafariのバグです。

解決方法は↓でcssを当てたいクラスの前に「_:lang(x)+_:-webkit-full-screen-document,」を付けるだけです。

これでcssが当たって画像がちゃんと表示されました。

ググった時にsafariだとcssでのバグが色々と見つかりました、だからsafariで見た時に変になったらググれば大体解決できると思います。

そして完成したコーディングは↓です。

classの命名規則はBEMを使っているのですがcssがスッキリするからお勧めです。