CSSでオーバーレイのスタイルが期待通りに表示されない、::backdrop疑似要素の変更された使い方
ダイアログやモーダルを表示する時に、コンテンツの上にオーバーレイを使用します。このオーバーレイはコンテンツの上に表示されるように::backdrop疑似要素で最上位レイヤーにするのが簡単です。 先日アップデートされたChrome 122でこの::backdrop疑似要素の値の継承ルールが変更されました。 Changes to CSS ::backdrop inheritance by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 これまでの::backdrop疑似要素 アップデートされた::backdrop疑似要素 これまでの::backdrop疑似要素 フルスクリーンに表示する要素用のAPIを定義するFullscreen APIでは、最上位レイヤーや::backdrop疑
【コピペ可】background-attachment: fixed;がスマホ（iOSのSafari）で効かない問題を完全に解決する【CSSのみ】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./destyle.css" /> <link rel="stylesheet" href="./style.css" /> </head> <body> <div class="Firstview">FirstView</div> <section class="Section"> <div class
CSSで背景100％表示で切れる時の解決方法｜ヨシキミナトヤ.COM
背景横100％で表示すると背景が切れる 背景色でも背景画像でもブラウザ横100％で表示する事は普通にあると思います。 背景の上にそのままコンテンツを展開する場合は問題ないのですが、 中に「width固定」を入れると、ブラウザの横スクロールが出るまで縮めてスクロールすると、 背景が切れている場合があります。 なぜでしょうねぇ。検証します。
iOSでposition:fixedした要素がスクロール中だけz-indexを無視して前面に表示されてしまうバグ - Qiita
ブラウザの表示領域に対して要素の位置を固定してくれるposition: fixed;は、表示領域が限られるスマートフォンでこそ使いどころがたくさんあるのだが、（特にAndroidで）バグが多くて実用にはまだまだ慎重にならざるを得ない。 今回は、iOSで遭遇したバグについて記述しておく。 症状 position: fixedを指定した要素がz-indexを無視する。 精確に説明すると、position: fixedを指定した要素が、表示領域外にある部分が、スクロールされて表示領域に入ってきたときに、スクロールされている間だけ、z-indexが無視されて、より大きなz-indexが指定されている（即ちより手前の）要素より前面に表示される。 実際のコードをご覧いただこう。 <div class="contents">ここに通常のコンテンツ</div> <div class="bg"></div>
PIEバグレポート
この記事は1年以上前の記事のため、内容が古い可能性があります。 複数のタグの中にあるブロック要素のタグを角丸にする場合、角丸が効かない場合があります。 例） <div class="box_outer"> <div class="box"> PIEではIEでも<br /> 角丸・ドロップシャドウ・グラデーションを<br /> 実行できます。 </div> </div> この要素の各スタイルは以下の通り .box_outer{ padding:20px; background-color:#FFF; } .box { padding:20px; background-color:#EEE; border:solid 1px #000; /*角丸*/ -moz-border-radius: 15px; /*FireFox*/ -webkit-border-radius: 15px; /* Sa
[JS]Firefoxでのパララックススクロールのもたつきを解消するスクリプト
複数の画像を使って視差効果を生み出すパララックススクロールを操作する際、Firefoxで起こるもたつきを解消するスクリプトを紹介します。 Faster parallax scrolling websites in Firefox [ad#ad-2] パララックススクロールとは下記のサイトなどで使用されているテクニックで、複数のレイヤーをそれぞれ異なるタイミングでスクロールし、視差効果を生み出すものです。 Iutopi ここで紹介するのは、これらのパララックススクロールを操作する際、Firefoxでもたつくのを解消するスクリプトです。 この現象は、IE, Chrome, Safari, Operaでは見られません。 Firefoxでのパララックススクロールのもたつきを解消するスクリプト 下記のスクリプトを使用することで、Firefoxでのもたつきを解消できます。 /* Firefox sup
Facebookのコメントボックスを黒背景のブログで使えるようにする
Facebookのコメントボックスを、黒背景のブログで使えるようにする方法について調べました。2011年4月時点の調査結果です。 2011.04.16 追記 コメントボックス作成画面に「Color Scheme」が追加されました。 以前のコメントボックス作成画面 2011年4月16日現在のコメントボックス作成画面（「Color Scheme」が追加） 適用後のデザイン よって以下の記事は不要となります。 １．問題点 Facebookのコメントボックスは白背景であれば次のように表示されます。 黒背景の場合、コメント本文などが見えなくなってしまいます。 コメントボックスの表示はfb:commentsタグを設定し、それがiframe要素として展開されます。iframe要素までは（そのページのCSSで）スタイルを設定できますが、iframe内の要素についてはスタイルが適用されません。 ２．対処案１
[CSS]横スクロール時にヘッダやフッタが切れてしまう時の解決方法
ヘッダやフッタがブラウザの横幅より広い際に、横スクロールするとヘッダとフッタが切れてしまうのを解決する方法を紹介します。 これはIE6などの旧式のブラウザだけでなく、Firefox3.6やChromeでも起きる現象です。 How to Resolve a Fluid Header/Footer Problem When the Window is Resized デモページ（不具合版） ※キャプチャはFirefox3.6（不具合の確認は横幅を小さくして） この現象が起きる条件は下記のようになります。 ヘッダとフッタのサイズは指定されていない。 →横いっぱいに広がる。 コンテンツエリアのサイズは指定されており、「margin:auto;」で中央に配置。 ブラウザのサイズはコンテンツエリアのサイズより小さい。 →ブラウザに横スクロールバーがでる。 期待される表示は、下記のようにコンテンツが中央
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
