Safari margin issues

Get Help
,
1

I have several forms that have been created in WordPress with Oxygen Builder and everything looks fine in Chrome, Firefox and Edge, but in Safari something strange happens with the top margin of various fields.

This is the site for one of the forms: GF CORPORATION TAX ID / EIN APPLICATION - E-Gov-Docs

If you check in the other forms on the homepage the error persists.

Look for the Email, Radio, and some other fields and you will see an empty line as it looks like there is a margin there, but there is none of that in the CSS. Also, if you continue with the steps, you will notice that this is a recurring problem.

I have used flexbox, margin, and padding 0, and the left and right columns are the correct widths. Could you please inspect the code and help me find a solution?

This is the code of the Email field in the first step of the form:

<fieldset id="field_8_13" class="gfield gfield--width-two-thirds gf_email_field_wrapper gf_last_field field_sublabel_below field_description_below gfield_visibility_visible"><legend class="gfield_label gfield_label_before_complex">Email</legend><div class="ginput_complex ginput_container ginput_container_email" id="input_8_13_container">
    <span id="input_8_13_1_container" class="ginput_left">
        <input class="" type="text" name="input_13" id="input_8_13" value="" placeholder="addres@domain.com" aria-invalid="false">
        <label for="input_8_13">Enter Email</label>
    </span>
    <span id="input_8_13_2_container" class="ginput_right">
        <input class="" type="text" name="input_13_2" id="input_8_13_2" value="" placeholder="addres@domain.com" aria-invalid="false">
        <label for="input_8_13_2">Confirm Email</label>
    </span>
    <div class="gf_clear gf_clear_complex"></div>
</div>
</fieldset>

.gform_wrapper.gravity-theme .gform_body .gf_email_field_wrapper {
    background-color: #fbfbfc;
    padding-left: 35px;
    padding-right: 35px;
    padding-top: 30px;
    padding-bottom: 5px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 0px;
    margin: 0px;
    display: flex;
    flex-direction: row;
    width: 100%;
}

This is the code from the Phone field that is before Email:

<div id="field_8_20" class="gfield gfield--width-two-thirds gf_general_field_wrapper field_sublabel_below field_description_below gfield_visibility_visible">
    <label class="gfield_label" for="input_8_20">Phone

    </label>
    <div class="ginput_container ginput_container_phone">
        <input name="input_20" id="input_8_20" type="text" value="" class="large" placeholder="(222) 555-1212" aria-invalid="false">
    </div>
</div>

.gform_body .gform_page_fields .gf_general_field_wrapper {
    background-color: #fbfbfc;
    padding-top: 30px;
    padding-right: 35px;
    padding-left: 35px;
    padding-bottom: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0px;
}

This results in a transparent line at the top that makes the appearance of a margin, but it is visible only in Safari.

This also happens in various fields throughout the form, and also in other forms within the website.

2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.