Why does Safari add a margin between my search input and button elements?-CodePudding

I have a search bar that looks like this Search bar.

However, when I view my website in Safari, it looks like this: Broken search bar.

For some reason, there is a gap between my search icon and search input elements. I've tried disabling webkit styles using -webkit-appearance: none;, but it doesn't work. Here is my code:

body {
background-color: #000000
}

header {
  display: flex;
  justify-content: right;
  margin: 1rem;
}

#search {
  font-family: 'Montserrat', sans-serif;
  border: none;
  border-radius: 5px 0 0 5px;
  padding: 13px;
  background-color: rgba(255, 255, 255, 0.5);
  flex: 0.95;
  color: #ffffff;
  font-weight: bold;
}

#search::placeholder {
  color: #ffffff;
}

#search:focus {
  outline: none;
}

.search-container {
  display: flex;
  max-width: 350px;
  min-width: 350px;
}

.search-button {
  border: none;
  cursor: pointer;
  color: var(--dark-bg);
  background-color: #ffffff;
  border-radius: 0 5px 5px 0;
  font-size: 20px;
  padding: 0 13px;
  flex: 0.05;
}

input[type='search']::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

input[type='search']::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
  display: none;
}

input[type='search'],
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

<header>
      <div >
        <input
          type="search"
          id="search"
          name="search"
          placeholder="City Search"
          autocomplete="off"
        />
        <button type="submit" >
          <i ></i>
        </button>
      </div>
    </header>

I've been stuck on the issue for the past few days. If anyone could provide some help it would be much appreciated.

CodePudding user response：

There is some extra margin that creates this gap on Safari.

So, you can add zero margin to #search and .search-button

#search {
  font-family: 'Montserrat', sans-serif;
  border: none;
  border-radius: 5px 0 0 5px;
  padding: 13px;
  background-color: rgba(255, 255, 255, 0.5);
  flex: 0.95;
  color: #ffffff;
  font-weight: bold;
  margin: 0;
}

.search-button {
  border: none;
  cursor: pointer;
  color: var(--dark-bg);
  background-color: #ffffff;
  border-radius: 0 5px 5px 0;
  font-size: 20px;
  padding: 0 13px;
  flex: 0.05;
  margin: 0;
}

Fiddle: https://jsfiddle.net/kongallis/kdezgsw5/1/