青いやつの進捗日記。

メモとしてべんきょうのしんちょくをかいていきます。あとで自分が検索しやすいもん

Safari

Safariでborder-radiusがhover中に一瞬とれてしまう件、重ねあわせコンテキスト作ってあげると直る

hirakublog.com qiita.com z-indexとかwill-changeとかもあるのだけど、つまるところ重ねあわせコンテキストを作ってあげれば直るみたい。ホバー時に中身でopacityなりtransformなりしていると思うのだけど、それらで重ね合わせコンテキスト的になんかバグっ…

【リンクメモ】iOS Safari ではクリックやタッチでしかfocus()できないらしい

www.gwtcenter.com qiita.com mixiengineer.hatenablog.com

iOS Safariでキーボードを開いている際にposition: fixedの挙動がおかしい?

ちょっと明確なソースがあるわけではないので確証はない。 iOS Safariでキーボード(Virtual Keyboard)を開いている際にposition: fixedの挙動がおかしいっぽい。 iOS Safari Virtual Keyboardを開いている position: fixed; bottom: 0; の際に、 スクロール…

iOS Safari でCSSのcalcの中でvw,vhが使えない

www.seleqt.net なんかそういえばそういうのあったな…気づかなかった…しょうがないのでJSでwindow.innerWidthとか入れてそれでstyled-componentsで計算させた。 Safari で vw, vh などを calc() と一緒に使うとレスポンシブじゃなくなるバグまだ直ってないで…

iOS Safari, Android Chrome 実機デバッグ

www.yoheim.net qiita.com applech2.com iOS15でSafariに拡張機能を入れられるようになり、Webインスペクターを使える拡張機能もあるらしい。使えそう

ページ下部にトップに戻るボタンとか設置する時に気をつけるべきこと。iOSでセーフエリア、Safariで下部のステータスバー

iOSのSafariはブラウザ開いた際に出るステータスバー分、タップできないエリアが存在する。ここの領域はステータスバーが出ていないときはタップが無効になる。 また、iPhoneX以降はセーフエリアというのが存在する。周囲のノッチの周囲あたりがセーフエリア…

Safariでのバグ。z-indexとtransformの組み合わせにおるz軸での戦い

Safariで、 .layer1 { transform: rotateX(45deg) } .layer2 { z-index: 1; } rotateXさせている.layer1の上に.layer2を乗せたい時。 Chromeなどでは問題なかったのだが、Safariではなんと、.layer1が上に来る。 どうやら、Safariではz-indexよりtransformの…

iPhoneのSafariで横向きにしたときに文字が一部拡大してしまう

www.webdlab.com iPhone Safari 横 iPhone Safari 縦 横にすると、※1が拡大されてしまう。 おそらくiPhoneのSafariのみ。 なので、 developer.mozilla.org これでテキストの自動拡大アルゴリズムを制御する。 body { //iPhoneのSafariでで横向きにした際に一…