title: Chrome Bug involving columns and forms
body: <p>I have this Codepen <a href="http://codepen.io/rafaeljuarez/pen/KpXBdB" rel="nofollow">http://codepen.io/rafaeljuarez/pen/KpXBdB</a></p>
  
  <pre><code>&lt;div id="cotizacioncontainer" &gt;
  
  
  &lt;div id="cotizacion" &gt;
  &lt;h1&gt;fghgfh&lt;/h1&gt;
  &lt;p class="resumen"&gt;fghfghfgh&lt;/p&gt;
  
  
  
  &lt;form id="form" name="form1" method="post" action="SVF-emailer.php"&gt;
  &lt;div id="formulario" class="doscols"&gt;
  &lt;label&gt;
  &lt;span class="moq"&gt;Fecha y hora de tu evento&lt;/span&gt;
  &lt;input type="text" name="fecha" id="fecha"&gt;
  &lt;/label&gt;
  
  &lt;label&gt;
  &lt;span class="moq"&gt;Lugar de tu evento&lt;/span&gt;
  &lt;input type="text" name="lugar" id="lugar"&gt;
  &lt;/label&gt;
  
  &lt;label&gt;
  &lt;span class="moq"&gt;Cuantos niños invitarás?&lt;/span&gt;
  &lt;input type="text" name="cuantos" id="cuantos"&gt;
  &lt;/label&gt;
  
  &lt;label&gt;
  &lt;span class="moq"&gt;Edades aproximadas&lt;/span&gt;
  &lt;input type="text" name="edades" id="edades"&gt;
  &lt;/label&gt;
  
  
  &lt;label&gt;
  &lt;span class="moq"&gt;¿qué Plan Deseas?&lt;/span&gt;
  &lt;select name="plan" id="plan"&gt;
  &lt;option value="..." selected&gt;Selecciona plan&lt;/option&gt;
  &lt;/select&gt;
  &lt;/label&gt;
  
  &lt;label&gt;
  &lt;span class="moq"&gt;¿Qué Servicios extra Deseas?&lt;/span&gt;
  &lt;select name="extra" id="extra" multiple size="10"&gt;
  &lt;option value="..." selected&gt;Selecciona plan (Puedes seleccionar varios)            &lt;/option&gt;
  
  &lt;/select&gt;
  &lt;/label&gt;
  
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>with this CSS:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p><strong>Please note this:</strong> </p>
  
  <p>If I remove the h1 and the .desc (or set them to display none), it behaves ok.</p>
  
  <p>If I remove the transform skew it behaves ok</p>
  
  <p>If I remove the columns, it behaves ok.</p>
  
  <p>If I add transform: translateZ(0) to the multi column element #formulario, it behaves ok. </p>
  
  <p>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? </p>
  
  <p>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. </p>