One of the issues I am facing involves a text field that contains a cogwheel symbol which opens a popup menu with different search options. The layout is set up using a flexible box model for certain elements.
After testing in Firefox, the display is as expected:
https://i.sstatic.net/o5QbM.pngHowever, when viewed in Webkit browsers such as Safari and Vivaldi, the layout appears like this:
https://i.sstatic.net/QAueR.pngThe main problem I am encountering is that the cogwheel is not aligned properly in Webkit browsers. Although the text menu not stretching can be fixed by adjusting the container width, the misalignment of the cogwheel is my primary concern.
Though I do not currently have Chrome, I suspect it may exhibit similar rendering issues as other Webkit browsers.
Below is the relevant CSS code that I believe is contributing to the problem:
.flex-search {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
width: 100%;
border: 1px solid #222;
border-radius: .4em;
background-color: #fff;
}
.flex-search > :first-child {
-webkit-flex: 1;
flex: 1;
}
.flex-search > :last-child {
width: 2em;
border-left: 1px solid #ccc;
cursor: pointer;
}
Here is a snippet that demonstrates the search field in its entirety:
$( '.flex-search input[type="radio"]' ).click( function() {
$( this ).closest( 'span' )
.css( 'display', 'none' )
.delay( 500 )
.queue( function ( next ) {
$( this ).removeAttr( 'style' );
next();
} );
$( this ).closest( 'fieldset' )
.find( 'input[type="text"]' )
.attr( 'placeholder', $( this ).closest( 'label' ).text() )
.focus();
} );
/* CSS Snippet */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<fieldset class="flex-search">
<span>
<input type="text" name="id" placeholder="contains">
</span>
<span>
<span>
<label><input type="radio" name="t-id" value="c" checked="checked"><span>contains</span></label>
<label><input type="radio" name="t-id" value="s"><span>starts with</span></label>
<label><input type="radio" name="t-id" value="e"><span>ends with</span></label>
<label><input type="radio" name="t-id" value="i"><span>equals</span></label>
</span>
</span>
</fieldset>
</div>
I am seeking insights into why the Webkit browsers are displaying the layout differently and what steps I can take to rectify this issue. If you have suggestions on simplifying the code, that would also be greatly appreciated, but my primary focus is on achieving a consistent display across all browsers.