I have an input type="text" and a div underneath it. When the input type="text" changes from having text in it to being empty, the div underneath it shifts up and down a few pixels. This problem only happens in Safari.

Is a webkit CSS property that's part of Safari causing this problem? I can't figure out why it's happening.

Here is my code, the JSFiddle, and a video of the problem.

In the video, note the black box that moves up and down a few pixels is the div with () which is underneath the textbox with ().

Black box moves up and down a few pixels when input text box changes

https://jsfiddle.net/ea2knx30/

.headerSearch {
    border-top: 1px solid #252525;
    border-bottom: 3px solid #252525;
    background: #252525;
    position: relative;
    width: 100%;
    z-index: 777;
    }
    
    .entireSearchContainer {
    margin-left: 156.44px;
    }
    
    .entireSearchContainer .searchBar {
    display: block;
    float: left;
    width: 662px;
    margin-top: 22.82px;
    height: 46.978px;
    background-color: #fff;
    box-sizing: border-box;
    }
    
    .entireSearchContainer .searchBar .searchBarInner {
    display: inline-flex;
    display: -webkit-inline-flex;
    width: 100%;
    height: 48px;
    }
    
    .entireSearchContainer .searchBar .searchBox {
    flex: 1;
    padding: 17.944px;
    }
    
    .autocompleteContainerSearch {
    z-index: 1110;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    overflow-x: hidden;
    flex: 1;
    max-width: 662px;
    height: 30px;
    width: 100%;
    margin-top: -1px;
    position: absolute !important;
    border: 1px solid #000;
    display: block;
    padding-bottom: 6.854px;
    }

    <div  id="headerSearch">
    
                <div  id="entireSearchContainer">
    
                    <form id="searchForm" name="example" action="https://example.com/" method="GET">
    
                        <div  id="searchBar">
    
                            <div >
    
                                <input  id="searchBox" type="text" name="q" placeholder="" value="" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" required="">
    
                            </div>
    
                            <div  id="autocompleteContainer" style="display: block;"> </div>                    
                        </div>
    
              
                                        
                    </form>
                
                </div>         
    </div>

CodePudding user response：

This is how I wrote it and the problem seems to be resolved.

.entireSearchContainer .searchBar .searchBarInner {
   display: flex;
   width: 100%;
   height: 48px;
}