Windows 7のChromeバージョン60.0.3112.78(公式ビルド)(64ビット)
CSSグリッドのレイアウトを調べていますが、Chromeで奇妙な問題が発生しました(Firefoxでは正常に機能します)。ページの水平方向と垂直方向の中央に配置する簡単な登録フォームを作成しました。
3つのネストされたグリッドを使用してレイアウトを構成します。
html {
height: 100%;
}
body {
font-family: 'Rubik', sans-serif;
margin: 0;
padding: 0;
background: #aaffff;
height: 100%;
}
#root {
height: 100%;
}
button,
input,
label {
font-family: 'Rubik', sans-serif;
font-weight: 600;
}
label {
display: inline-block;
text-align: left;
}
.formGroup {
display: inline-block;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
a:link {
text-decoration: none;
color: inherit;
}
a:hover {
text-decoration: underline;
}
*:focus {
outline-width: 3px;
outline-color: rgba(66, 66, 66, 0.7);
outline-style: dashed;
outline-offset: 3px;
}
.Input {
color: #333;
border: none;
height: 2em;
padding: 5px 10px;
display: block;
/* width: 100%; */
}
.Input:focus {
outline-width: 3px;
outline-color: rgba(66, 66, 66, 0.7);
outline-style: dashed;
outline-offset: 3px;
}
.Button {
display: inline-block;
font-weight: 800;
text-align: center;
white-space: nowrap;
vertical-align: middle;
padding: 20px 40px;
border-radius: 4px;
border: none;
background: none;
position: relative;
text-transform: uppercase;
margin: 15px 30px;
}
.Button.primary {
background: #0000ff;
box-shadow: 0 9px #000088;
color: #fff;
}
.Button.primary:hover {
top: 5px;
box-shadow: 0 4px #000088;
}
.Button.primary:active {
top: 9px;
box-shadow: none;
}
.Button.primary:focus {
outline-width: 3px;
outline-color: rgba(0, 0, 255, 0.7);
outline-style: dashed;
outline-offset: 3px;
}
.RegistrationForm-container {
display: grid;
grid-template-columns: 3% auto 3%;
grid-template-rows: 100px 25% auto 25%;
}
.RegistrationForm-container .copy {
grid-column-start: 2;
grid-row-start: 2;
}
.RegistrationForm-container form {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
display: grid;
grid-template-columns: 1% auto 1%;
grid-template-rows: 25px auto 25px;
}
.RegistrationForm-container form .inner {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
display: grid;
grid-template-columns: 1% auto 1%;
grid-template-rows: 50px 50px;
}
.RegistrationForm-container form .inner .emailFormGroup {
grid-column-start: 2;
grid-row-start: 1;
margin: 0 auto;
}
.RegistrationForm-container form .inner .buttonFormGroup {
grid-column-start: 2;
grid-row-start: 2;
}
.App {
text-align: center;
height: 100%;
}
<div id="root">
<div class="App">
<div class="RegistrationForm-container">
<div class="copy">
<h1>Register</h1>
<p>
By registering, you agree to our
<a href="/terms">terms of use and privacy policy</a>.
</p>
</div>
<form>
<div class="inner">
<div class="formGroup emailFormGroup">
<input
class="Input"
type="email"
placeholder="Email"
autocorrect="false"
/>
</div>
<div class="formGroup buttonFormGroup">
<button type="submit" class="Button primary">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
私のグリッドレイアウトは中央揃えに成功しますが、ウィンドウのサイズが変更されると誤動作します。ウィンドウのサイズを元のロードサイズより大きくしてから狭くすると、スクロールバーが表示され、入力とボタンが右側に固定されます。
ページのどこかをクリックするか、ボタン、入力、利用規約のリンクの間をタブで移動した後にのみ、それ自体が修正され、垂直/水平の中心に戻ります。
動作のデモンストレーションは次のとおりです。
https://codepen.io/jdoyle/pen/qXadXJ
margin:auto
グリッド内ではかなり奇妙な動作を開始しているように見えます。
必要な効果を得る方法ですが、バグを回避するには、
text-align: center;
で、emailFormGroup
次にdisplay: block
電子メール入力を削除します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加