Salient Theme: Conflict in Safari with Bootstrap 3 styles in Caldera Forms

I recently detected a CSS conflict in Safari when using the popular Caldera Forms plugin.

While other Browsers work fine – in Safari (and Cliqz) the input that a frontend user enters into form fields is cut off so you only see the very bottom of the letters.

The problem is probably the same as described in this ticket: https://themenectar.ticksy.com/ticket/899910/

The CSS fix provided there by the theme author did not work for me though.

Caldera Forms adds Bootstrap 3 styles to its forms by default, but this can be deactivated. This leaves the from somewhat unpretty but fixes the problem.​

The CSS code in question seems to be the height defined by the Bootstrap styles:

.caldera-grid .form-control {

}

My workaround: I disabled the Bootstrap styling in the settings of Caldera Forms and extracted the styles that were necessary to get that nice styling and put them into my child theme CSS file.

Here’s the code I used:

.caldera-grid label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

.caldera-grid .radio label {
    min-height: 20px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
}

.caldera-grid .form-control {
    width: 100%;
    /* height: 34px; commenting out the height definition */
    padding: 6px 12px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.caldera-grid textarea.form-control {
    padding-right: 4px;
    height: auto;
}

.caldera-grid .form-control, .caldera-grid output {
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    display: block;
}


.caldera-grid .btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc!important;
}

.caldera-grid .btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 2px;
    user-select: none;
}

Addition from August 01, 2017: A similar conflict appears when using the Toolset suite of plugins by OnTheGoSystems, with Types being its most popular plugin. Toolset is loading loading its own instance of Bootstrap styles, apparently. The fix is easy: Just change to Bootstrap loading presets in the WordPress Dashboard under Toolset > Settings. In my case, I selected “The theme or another plugin is already loading Bootstrap 3.0” in order to get Caldera Forms back to working.