Chrome Bug involving columns and forms

Question

I have this Codepen http://codepen.io/rafaeljuarez/pen/KpXBdB

<div id="cotizacioncontainer" >


<div id="cotizacion" >
<h1>fghgfh</h1>
<p class="resumen">fghfghfgh</p>



<form id="form" name="form1" method="post" action="SVF-emailer.php">
<div id="formulario" class="doscols">
<label>
<span class="moq">Fecha y hora de tu evento</span>
<input type="text" name="fecha" id="fecha">
</label>

<label>
<span class="moq">Lugar de tu evento</span>
<input type="text" name="lugar" id="lugar">
</label>

<label>
<span class="moq">Cuantos niños invitarás?</span>
<input type="text" name="cuantos" id="cuantos">
</label>

<label>
<span class="moq">Edades aproximadas</span>
<input type="text" name="edades" id="edades">
</label>


<label>
<span class="moq">¿qué Plan Deseas?</span>
<select name="plan" id="plan">
<option value="..." selected>Selecciona plan</option>
</select>
</label>

<label>
<span class="moq">¿Qué Servicios extra Deseas?</span>
<select name="extra" id="extra" multiple size="10">
<option value="..." selected>Selecciona plan (Puedes seleccionar varios)            </option>

</select>
</label>

</div>
</form>
</div>
</div>

with this CSS:

#cotizacioncontainer{  transform:skewY(-3deg);
position:relative;
padding:150px 0;
background-color:#000; 
color:#fff!important;}

#cotizacion{ max-width:1000px;
transform: skewY(3deg);
position:relative;
margin-right:auto;
margin-left:auto;}

#cotizacion h1{ font-size:40px;
}

#formulario{column-count:2;
-webkit-column-count:2;
-moz-column-count:2;
column-gap:40px;
column-width:auto;
-webkit-column-width:auto;
-webkit-column-gap:40px;
display:inline-block;
width:100%;
overflow:hidden;}

#formulario label {
margin-bottom:20px;
position:relative;
display:block;
color:#fff;
}


#formulario label:focus {
background: rgba(255,255,255,1);
}

#formulario label span.moq {
display: block;
font-size: 19px;
text-transform: uppercase;
margin-bottom:5px;
}

#formulario input, #formulario textarea, #formulario select {
border: dashed 2px #fff;
background-color: transparent;
width: 100%;
padding: 15px;
font-size: 14px;
color: #fff;
box-sizing: border-box;
transition:all 0.3s linear;
}

Note the form is completely unusable in Chrome but it works fine on Firefox. I just can not explain how is this called or how or why it happens. Just know it's very annoying.

When you click on a field it's like if you had click lower, the exact amount of pixels than the h1 and the .desc occupy in height.

Please note this:

If I remove the h1 and the .desc (or set them to display none), it behaves ok.

If I remove the transform skew it behaves ok

If I remove the columns, it behaves ok.

If I add transform: translateZ(0) to the multi column element #formulario, it behaves ok.

The last option seems to be a nice hack that allows me to kkep my design elegant. But I would like to know what is the real problem here and why does it happen? Why only in Chrome?

I've experiencing extremely frustrating multi column layout bugs in Chrome and no one seems to care about it; on my side I'd love multi column support becomes more stable.

Answer 1

It looks like a browser bug. The solution is to add:

#formulario {
    -webkit-transform: translate3d(0, 0, 0);
}

See it live here

Answer 2

Chrome seems to incorrectly calculate <label> child elements' heights when using column-count. Also, it doesn't seem to like making child elements position:relative.

If you want to keep your html the same, you can remove position:relative from #formulario label and this will fix your issue.

It looks like chrome are currently still in the implementation phase for column-count. https://www.chromestatus.com/features/6526151266664448

Also, it might be worth searching for "column-count" on https://code.google.com/p/chromium/issues/list to see if anyone else has the same issue, if not I recommend you log it.