Chromeは、複数のグラデーションをレンダリングするときに、間に空白/ギャップを残します
ダニル・シロフ
LeaVerouの本「CSSSecrets」を読んでいます。
丸い角の放射状の複数のグラデーションの例があります：http：//dabblet.com/gist/24484257bc6cf7076a8e
IE11、Edge、FFは、意図したとおりに正しく表示します。しかし、Chromeはブロック内に奇妙な境界線を作成します。理由がわかりません。バグのようです。誰かがこの動作を説明できますか？これはBlink仕様の一部にすぎないのでしょうか？
div {
background: #58a;
background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
width:4em;
height:4em;
padding: 1em 1.2em;
max-width: 12em;
color: white;
font: 130%/1.6 Baskerville, Palatino, serif;
}<div></div> ハリー
この回答を裏付ける公式の情報源はありません（まだ見つけようとしていますが、見つけられたらここに追加します）が、過去にChromeで同様の問題が発生したことがありますが、計算された値がChromeでどのように丸められるか。バックグラウンドサイズはX軸とY軸の両方で50％であり、50％の計算値は分数であるため、ここでは丸めが行われています。計算は、以下のスニペット内のインラインコメントとして提供されます。
Blink / WebKitは、0.5を超えているかどうかに関係なく、計算値を切り捨てているようです。このデモでは、要素の全高は124.8ピクセル、幅は133.12ピクセルです。したがって、50％の値は62.4pxと66.56pxになります（62と66pxに切り捨てられます）。divスニペットの3番目の値には、これらの値が明示的にとして設定されてbackground-sizeおり、その出力が最初の値（がbackground-size: 50% 50%）とどのように同じであるかを確認できるため、説明がわかります。
このように値を切り捨てると、背景が水平方向に占める実際の領域は132ピクセル（実際の幅より1.12ピクセル小さい）、垂直方向は124ピクセル（実際の高さより0.8ピクセル小さい）になります。したがって、それは間にギャップを残します。
John Resigによるこのブログ投稿では、ブラウザで丸めがどのように処理されるかについての洞察も得られます。ご覧のとおり、Blink / WebKitは切り捨てられていますが、IEは切り上げているようです。切り上げると、計算値は63pxと67pxになりますが、すべての辺の色が同じであるため、これらの値が重なり合ってスペースを埋めるだけなので、目に見えて問題は発生しません（これらの値を明示的に設定しても、Chromeでも問題は発生しません）背景サイズについては、2番目を参照してくださいdiv）。Firefoxには包括的な丸めロジックがあるようです。これは、スペースを完全に埋めるために一部を切り捨てる一方で、他の一部を切り捨てるため、問題は発生しません。
div {
background: #58a;
background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
width:4em; /* 83.2px */
height:4em; /* 83.2px */
padding: 1em 1.2em; /* left/right padding = 24.96px, top padding = 20.8px */
max-width: 12em;
color: white;
font: 130%/1.6 Baskerville, Palatino, serif; /* font-size = 130% of 16px = 20.8px */
}
/* so,
total width = 83.2px + (24.96px * 2) = 133.12px (50% = 66.56px)
total height = 83.2px + (20.8px * 2) = 124.8px (50% = 62.4px)
*/
div:nth-of-type(2) {
background-size: 67px 63px;
}
div:nth-of-type(3) {
background-size: 66px 62px;
}
div{
display: inline-block;
margin: 10px;
}<div></div>
<div></div>
<div></div>これは、放射状のグラデーションだけではなく、線形のグラデーションでも発生します。
div {
background: #58a;
background: linear-gradient(red, red) top left,
linear-gradient(blue, blue) top right,
linear-gradient(green, green) bottom right,
linear-gradient(tomato, tomato) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
width:4em; /* 83.2px */
height:4em; /* 83.2px */
padding: 1em 1.2em; /* left/right padding = 24.96px, top padding = 20.8px */
max-width: 12em;
color: white;
font: 130%/1.6 Baskerville, Palatino, serif; /* font-size = 130% of 16px = 20.8px */
}
/* so,
total width = 83.2px + (24.96px * 2) = 133.12px (50% = 66.56px)
total height = 83.2px + (20.8px * 2) = 124.8px (50% = 62.4px)
*/
div:nth-of-type(2) {
background-size: 67px 63px;
}
div:nth-of-type(3) {
background-size: 66px 62px;
}
div{
display: inline-block;
margin: 10px;
}<div></div>
<div></div>
<div></div>また、画像もあります。
div {
background: #58a;
background: url(http://lorempixel.com/100/100/animals/1) top left,
url(http://lorempixel.com/100/100/animals/2) top right,
url(http://lorempixel.com/100/100/animals/3) bottom right,
url(http://lorempixel.com/100/100/animals/4) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
width:4em; /* 83.2px */
height:4em; /* 83.2px */
padding: 1em 1.2em; /* left/right padding = 24.96px, top padding = 20.8px */
max-width: 12em;
color: white;
font: 130%/1.6 Baskerville, Palatino, serif; /* font-size = 130% of 16px = 20.8px */
}
/* so,
total width = 83.2px + (24.96px * 2) = 133.12px (50% = 66.56px)
total height = 83.2px + (20.8px * 2) = 124.8px (50% = 62.4px)
*/
div:nth-of-type(2) {
background-size: 67px 63px;
}
div:nth-of-type(3) {
background-size: 66px 62px;
}
div{
display: inline-block;
margin: 10px;
}<div></div>
<div></div>
<div></div>注：私はかなり前からこの動作を文書化するための自己Q＆Aを投稿したいと思っていたので、質問していただきありがとうございます:)
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
行間に白いギャップがある複数行のテキストコンポーネントをレンダリングする方法
- 2
ディスプレイグリッドを使用する場合、メインコンテンツセクションが下に移動し、大きなギャップが残ります
- 3
エラー：再レンダリングが多すぎます。Reactは、無限ループを防ぐためにレンダリングの数を制限し、保存されているセッションデータをクリアすると消えます
- 4
パラメータを使用してレンダリングするときに中間結果をキャッシュする方法は？
- 5
デバッグ中に、シングルスレッドアプリケーションはコア間をジャンプしますか？
- 6
アップロードボタンのクリック時にカメラ、ギャラリーを選択してオプションを選択し、キャンセルしてダイアログまたはアクションセットを表示するにはどうすればよいですか？
- 7
HTMLキャンバスアニメーションが新しい長方形ごとに一時的なギャップをレンダリングするのはなぜですか？
- 8
OpenGLは、グラデーションを実行するときに頂点をスキップします
- 9
レンダリングで<div>を非表示にするreactJSは、多くの空白を残します
- 10
アプリケーションを終了するときにすべてのエグゼキューターをシャットダウンする方法は？
- 11
MySqlのデバッグはエラーをなくし、複数のスリープスレッドをランダムに取得します
- 12
WPF：「ショーはもっと」どこのクリックでコレクションをバインディングに既にあるitemControlで残りの項目を読み込むと同じようにボタンを追加します
- 13
ボタンをタップしたときにアプリケーションランチャーダイアログを表示する方法
- 14
コレクションをデバッグするときにmodcount変数は何をしますか
- 15
パンダは、グループごとにグループごとに異なるフラクションをサンプリングします
- 16
スプライトシートから複数のセクションをCanvasで同時にレンダリングしますか？
- 17
ヒストグラム関数を重複するビンと任意のギャップのあるビンに拡張しますか？
- 18
Intellij IDEAは、デバッグセッションごとに複数のプロセスを作成しますか？
- 19
Intellij IDEAは、デバッグセッションごとに複数のプロセスを作成しますか？
- 20
threejsでアニメーションを再生しようとしたときに空白の画面をレンダリングする
- 21
SparkScalaのデータフレーム内のグループごとに異なる数のランダムな行をサンプリングします
- 22
複数のグラフを含むDOTスクリプトをPDFにレンダリングします。ページごとに1つのグラフ
- 23
glDatePickerは、プログレッシブ月に複数のカレンダーを表示します
- 24
ギャラリーを初期化するときに、画像ごとにキャプションを設定することはできますか？
- 25
グリッドに複数のキャンバスを挿入すると、プログラムがクラッシュします
- 26
パンダのデータフレームは、グループ内のいくつかの列の値をランダムにシャッフルします
- 27
ShinyはレスポンシブrChartsリーフレットマップを1回レンダリングしますが、入力変数を変更すると空白になります
- 28
Chromeは線形グラデーションを非常に途切れ途切れにレンダリングします
- 29
redmineプラグインで問題の説明の後に複数のパーシャルをレンダリングする
コメントを追加