选项卡式复选框不适用于移动设备

Question

我正在尝试创建一个 TABBED 复选框，并且除了在手机上之外一切正常。在手机上，点击其中一个选项卡后，它什么也不做，但如果我改变方向，它就会正确显示。谁能帮帮我吗。以防万一，我正在旧手机上测试兼容性，Android 4.4.2。

这是一个带有代码的代码笔： http://codepen.io/lepew/pen/Ppqwez

    <div id="sign_Page">
    <br/>
    Please select "REGISTER" for new applicants, "LOGIN for current hello users and "FORGOT" if you need your password reset.
    <br/>
    <br/>
    <div class="sign_Area">
        <input type="radio" name="tabGroup1" id="rad1" class="tab1"/>
        <label for="rad1">REGISTER</label>
        <input type="radio" name="tabGroup1" id="rad2" class="tab2" checked="checked"/>
        <label for="rad2">LOGIN</label>
        <input type="radio" name="tabGroup1" id="rad3" class="tab3"/>
        <label for="rad3">FORGOT</label>
        <div class="tab1"><!-- REGISTER -->
            <div class="sign_Case">
                SIGNUP
                <br/>
                <br/>
                SUMBIT
            </div><!-- end of #sign_Case -->
        </div><!-- end of TAB1 -->
        <div class="tab2"><!-- LOGIN -->
            <div class="sign_Case">
                LOGIN
                <br/>
                <br/>
                SUMBIT
            </div><!-- end of #sign_Case -->
        </div><!-- end of TAB1 -->
        <div class="tab3"><!-- FORGOT -->
            <div class="sign_Case">
                EMAIL
                <br/>
                <br/>
                SUMBIT
            </div><!-- end of #sign_Case -->
        </div><!-- end of TAB1 -->
        <br/>
        <br/>
    </div><!-- end of #sign_Area -->
</div><!-- end of #sign_Page -->

Answer 1

在移动设备上强制回流，因为方向变化会引起。这些是脚本，但您可以这样做...

someelement.style.display='none';
someelement.offsetHeight; // no need to store this anywhere, the reference is enough
someelement.style.display='';

可选的 timeout 为 0 会触发重排，就像查询 offsetHeight 所做的那样：

sel.style.display = 'run-in'; 
setTimeout(function () { sel.style.display = 'block'; }, 0);