语义Ui模态抖动行为

Question

I am using Semantic-UI for designing a site for my project and I while using modal, I am seeing a jittery behaviour.

Here is the link : Click Here to Enter The Project Site

Press the 'Register' button to open up the modal dialog, and you will notice the dialog being formed in the left side and then shows up properly.

Cannot understand the reason for this behaviour.

Some help will be appreciated.

Code :

<!-- Register Box -->
    <div class="ui fluid standard modal" id="RegisterBox">
        <div class="ui attached message" id="headerImage">
            <div class="header" id="head">
                Welcome to MeetUp!
            </div>
            <p id="subHead">Sign-up for a new account here.</p>
        </div>
        <div class="ui error form segment" id="regForm">
            <div class="ui black row">
                <div class="two fields">
                    <div class="field">
                        <label>First Name</label>
                        <input class="text" placeholder="First Name" type="text" name="fname" id="txtFn">
                    </div>
                    <div class="field">
                        <label>Last Name</label>
                        <input class="text" placeholder="Last Name" type="text" name="lname" id="txtLn">
                    </div>
                </div>
            </div>

            <div class="two fields">
                <div class="field">
                    <label>Email</label>
                    <input class="text" placeholder="Email Id" type="email" name="email" id="txtEmail">
                </div>
                <div class="field">
                    <label>Gender</label>
                    <div class="text ui selection dropdown" id="cmbSex">
                        <div class="default text">Select</div>
                        <i class="dropdown icon"></i>
                        <input type="hidden" name="gender">
                        <div class="menu">
                            <div class="item" data-value="male" data-text="Male">
                                <i class="male icon"></i>
                                Male
                            </div>
                            <div class="item" data-value="female" data-text="Female">
                                <i class="female icon"></i>
                                Female
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="two fields">
                <div class="field">
                    <label>Password</label>
                    <input class="text" type="password" placeholder="Password" name="pass" id="txtPassword">
                </div>
                <div class="field">
                    <label>Confirm Password</label>
                    <input class="text" type="password" placeholder="Password" name="Cpass" id="txtRepeatPass">
                </div>
            </div>
            <div class="ui blue button" id="btnSubmit">Register</div>
        </div>
        <i class="close icon"></i>
    </div>

Answer 1

I've detected the problem. This is a caused by the new version of the library. Using the old version[stable] solved it.