Question

我目前正在构建一个页面，其中包含一个框，当它悬停在其上时，另一个div绝对位于它后面并隐藏旋转到视图中。这个div包含一个表单。

这在Firefox和IE上工作正常，但是当我尝试在Chrome中使用时，表单变得没有响应，几乎就像选择框不起作用一样。

这是我创建的一个粗略的JSFiddle。将鼠标悬停在红色框上并尝试使用弹出的表单，您应该会看到问题（请确保使用Google Chrome打开JSFiddle）。

我之前从未遇到过这个问题所以我不知道从哪里开始真的这样建议会很棒。

由于

这是我的代码：

HTML

<div ontouchstart="this.classList.toggle('hover');" class="item small lamp-finder-wrapper flip-container col6" style="">
    <div class="flipper">
        <div class="front-side" id="side-1">
            <a href="/~gvmulti/index.php/technologies/2?search=&amp;order=i.ordering&amp;dir=asc&amp;cm=0#tlb" style="display: block; background-image: url('/~gvmulti/images/lampFinder.jpg')" class="image"></a>          
        </div>
        <div class="back-side" id="side-2">
            <h3>Lamp Finder</h3>
            <div class="overlay">
                <img src="/~gvmulti/images/loading-text.gif">   
            </div>

                                            <form id="lamp-finder">         
                <label for="manufacturer">Manufacturer: </label>
                <select name="manufacturer">
                    <option value="">-- Please select --</option>
                                                <option value="_empty_"></option>
                                                <option value="177">3M</option>
                                                <option value="018">Acer</option>
                                                <option value="109">BENQ</option>
                                                <option value="191">Barco</option>
                                                <option value="087">Canon</option>
                                                <option value="014">Casio</option>
                                                <option value="217">Dell</option>
                                                <option value="232">Eiki</option>
                                                <option value="119">Elmo</option>
                                                <option value="027">Epson</option>
                                                <option value="032">Hitachi</option>
                                                <option value="172">JVC</option>
                                                <option value="088">Mitsubishi</option>
                                                <option value="131">NEC</option>
                                                <option value="196">Optoma</option>
                                                <option value="058">Panasonic</option>
                                                <option value="171">Philips</option>
                                                <option value="234">Plus</option>
                                                <option value="252">Projection Design</option>
                                                <option value="374">SMART</option>
                                                <option value="013">Sanyo</option>
                                                <option value="065">Sharp</option>
                                                <option value="096">Sony</option>
                                                <option value="233">Taxan</option>
                                                <option value="201">Themescene</option>
                                                <option value="108">Toshiba</option>
                                                <option value="235">Vivitek</option>
                                        </select>
                <label for="projector">Projector: </label>
                <select name="projector" disabled="">
                    <option value="">-- Please select --</option>
                </select>
            </form>
            <div class="lamp-results">

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

CSS

    /* Lamp Finder */
.lamp-finder-wrapper {
    width: 300px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    height: 300px;
}

#lamp-finder label {
    color: #E86017;
    font-weight: 700;
}

#lamp-finder select {
    padding: 7px;
    margin-top: 5px;
    margin-bottom: 10px;
    width: 100%;
}

.lamp-finder-wrapper {
    position: relative;
}

.lamp-finder-wrapper h3 {
    background-color: red;
    text-indent: 25px;
    background-repeat: no-repeat;
    height: 17px;
    padding-bottom: 17px;
    line-height: 30px;
    margin-bottom: 10px;
    width: 100%;
    border-bottom: 2px solid #fff;
}

.lamp-finder-wrapper .overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../../../images/trans.png);
}

.lamp-finder-wrapper .image {
    position: absolute !important;
    top: 0;
    left: 0;
}

.lamp-finder-wrapper .overlay img {
    width: 100px;
    left: 50%;
    margin-left: -50px;
    top: 50%;
    margin-top: -30px;
    position: absolute;
}

.lamp-results ul {
    margin-left: 14px;
}

.lamp-results ul li {
    color: #E86017;
}

.lamp-results ul li,.lamp-results ul li span {
    float: left;
}

.lamp-results ul li span {
    clear: both;
    color: #fff;
}

#side-2 {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: #333;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 193px;
    height: 396px;
    padding: 10px 20px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
}

#side-2 form {
    float: left;
    z-index: 10;
}

#side-1 {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    width: 193px;
    height: 396px;
    z-index: 2;
}

.flip-container {
    perspective: 1000;
    -webkit-perspective: 1000;
}

.flip-container:hover .flipper {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-container:hover .flipper .back-side {
    z-index: 3000;
}

.flipper {
    -webkit-transform: translateZ(0);
    transition: .6s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    position: relative;
}

.back-side {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
}

使用CSS转换时，表单在Chrome中不起作用 - 旋转

0 个答案: