Check out 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>
This code snippet is styled with the following 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;}
...
[Remaining CSS rules]
...
A compatibility issue has been noticed - while the form works fine on Firefox, it's unusable in Chrome. The field behaves strangely when clicked due to layout transformations and multi-column settings.
Please keep in mind:
If h1 and .desc elements are removed or hidden, the form functions correctly.
The problem arises when using skew transformation or column layouts.
Adding transform: translateZ(0) to the #formulario element resolves the issue in Chrome.
Although a temporary solution has been found, the underlying cause of these issues remains unclear. It seems to be specific to Chrome's handling of multi-column layouts.
This frustrating inconsistency in Chrome's behavior with multi-columns needs attention for better stability and support in web design.