CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる

Safari 15.4（最新は15.5）で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。 今まではCSSの-webkit-fill-availableがその対応方法でしたが、ネストされた要素やcalc()内では使用できません。新しいビューポート単位を使用すると、そういった問題もなくなります。 The Large, Small, and Dynamic Viewports by Bramus 2021年の記事ですが、Safari 15.4でこれらの新しいビューポート単位がサポートされたので、このタイミングで紹介します。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじ

[coliss]

CSSの新しいビューポート単位「lvh」「svh」Safari 15.4でサポートされました。

[kagioo2uma]

Safariは令和のIE6。

[mayumayu_nimolove]

いやいや標準のvhに合わせてくださいよsafariさん。つかみんな対応するから図に乗るんじゃね？w

[snipesnaps]

こんな場当たり的に機種やブラウザ特有の単位を増やしておいて、表示のための言語なのにまともな幾何演算も存在せずなのに苦し紛れのif構文がハックとして存在するCSSはやっぱり失敗言語だと感じる。

[nakamura-kenichi]

Safariはもう対応から外したらええと思うで。仕様が勝手実装に付き合う必要ないやろ。

[raitu]

Safariがどんどん標準からずれてく

[fellfield]

iOS15.4に更新してない場合も考えると、まだしばらくはCSS変数のほうが良いかな https://coliss.com/articles/build-websites/operation/css/viewport-units-on-mobile.html resizeイベントに加えて、orientationchangeイベントにも対応しておくといい

[iww]

ピクセルだけでいいよ

[spark7]

-webkit-fill-available のワークアラウンドを知らんかった。100vh問題はまだ続いてたんだな。シンプルにSafariがクソだと思う。

[manaten]

iOS safariが我が道を行くせいでiOS simulator使えるmacを開発用に用意せざるを得ないし、そういう商売なんじゃないかと思う。普通にWebページ作ってて日本で圧倒的シェアのiOS safariに対応しないなんて選択存在しないからなあ

[GENS]

マジカルワード「Safariは対応してないんスよ～」

[queuex]

IE6が死んで久しい今Safariが腐った牛乳ポジションに鎮座している もう積極的に対応無視しようか迷うレベル

[zzitne]

やっと…

[ku_marin]

Safariさんはほんとさぁ…

[circled]

Safariはスクロールすると表示可能域が広がるので、URL開いた時の初期画面の最大高がスクロールに従って動的に変わるのが原因かと。普通に考えればCSSではなく、JSでの対応向きな動きなのよな。

[IGA-OS]

Safariがガラパゴス化していってるらしい

[kagoyax]

全ユーザーの7-8割が最新版にアップデートするからIE6なんかより全然ましだぞ

[rryu]

CSSのドラフトには既にlvh、svh、dvhが存在していて、vhをdvhと同等に実装しているブラウザと挙動が違うという問題に対してdvhを使えという回答になっているらしい。ただし他ブラウザはdvhに対応していない…

[chiba1008]

サファリはどうでもいいからwebviewをwebkit使えるようにしてよ。

[small_tree]

単位がやたらと増えすぎて把握するのも面倒になるのは電磁気学と放射線関係だけで十分です

[adsty]

iOSのSafariの100vh問題を解決できる。

[ext3]

今までどうしてたんだむしろ

[sd-craft]

ブラウザ界のSafari、ゲーム界のSwitch

[remonoil]

　や　め　ろ

[cartman0]

単位増え過ぎだなあ

[gomaberry]

iPhone Safari だけ挙動違うっての結構やられて、そのたび回避のコードとか入れてるけどほんと勘弁してほしい。やっとIEなくなってきたのに。

[labor9]

インターネット黎明期での「こうっだったらいいな」的拡張をしてきた側面もあるIEと、そういった時代を経た後では悪意の重みが違う。

[xxxxxtttttt]

せっかくIEがそろそろ死ぬというのに・・・

[AzuLitchi]

W3Cの定義が曖昧なので標準がChromeってわけでもないよねこれ。一行追記で対応できるなんて有難い。20年間に来やがってくださいよ。本当のIE6を味合わせてあげますぜ。

[cl-gaku]

いやSafariが合わせーや

[sippo_des]

理由付きで対応不要なブラウザが増えてくのは嬉しい。

[meisoT]

どんどん新しい単位でてくるｩ

[sp_ice]

カオスだな

[retore]

SafariはSafariがクソなだけならいいんだけどiOS上の他のブラウザまで巻き込んでクソ化するのがマジでクソ

[Funyapu]

Mac Safariよりはまし。

[chocodoughnut]

css変数で対応することが多かったけどしばらくしたらこっちも使えそう

[sin20xx]

基本的にビジネス向けではSafariは非対応としている。そもそも使ってもらうメリットが皆無なのと、IE同様に対応するコストが本当に無駄。実際問題それで困る事がほぼないから、恐らくコンシューマ向けでも影響なさそう

[mohritaroh]

“これらの古い単位には明確な定義がなく、どのように振る舞うかはUA（ブラウザ）次第となります。あるブラウザ（現在のSafari）はvhをlvhのように振る舞い、他のブラウザはvhをdvhのように振る舞います”

[poponponpon]

コレ自体にバグが出てそれに対応するためのバッドノウハウが溜まっていく未来が目に見える。

[mongrelP]

ユーザー数は正義…感