0

Столкнулся с неправильным отображением содержимого flex-элемента в мобильном Firefox и встроенном браузере Meizu. При этом, тот же самый код правильно отображается на ПК и в мобильных Chrome, Yandex и Opera.

Подскажите, пожалуйста, что могло послужить причиной возникновения данной проблемы.

Ссылка на Codepen

    <html>
     <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://fonts.googleapis.com/css?family=Roboto"; rel="stylesheet">
     </head>
     <body>
      <div class="overlay">
      </div>
      <div class="searchbar">
       <div class="searchbarCloseButton">
        <svg xmlns="http://www.w3.org/2000/svg"; width="36" height="36" viewBox="0 0 24 24">
         <path class="searchbarCloseIcon" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
         <path d="M0 0h24v24H0z" fill="none"/>
        </svg>
       </div>
       <input class="searchbarInput" type="search" placeholder="Поиск" name="searchInput">
       <label class="searchbarSubmitButton">
        <svg xmlns="http://www.w3.org/2000/svg"; width="36" height="36" viewBox="0 0 24 24">
         <path class="searchSubmitIcon" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
         <path d="M0 0h24v24H0z" fill="none"/>
        </svg>
        <input class="searchbarSubmit" type="submit" name="searchSubmit">
       </label>
      </div>
     </body>
    </html>

*{
    font-size: 14px;
    box-sizing: border-box;
    margin: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
    font-family: Roboto, sans-serif;
    font-weight: 500;
}
input{
    outline: none;
    border: none;
}
html, body{
    min-height: 100%;
    width: 100%;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    fill: #62727b;
}
.overlay{
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: #000;
    overflow-y: auto;
    opacity: 0.8;
}
.searchbar{
    display: flex;
    overflow: hidden;
    position: fixed;
    top: 10px;
    left: 10%;
    right: 10%;
    border-radius: 12px;
    z-index: 5002;
    height: 50px;
    width: 80%;
    background: #fff;
}
.searchbarCloseButton{
    display: block;
    margin: auto;
    margin-right: 15px;
    margin-left: 15px;
    height: 36px;
    width: 36px;
}
.searchbarInput{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    transition: 0.6s;
    font-weight: 500;
    font-size: 20px;
    background: none;
    flex-grow: 1;
    -webkit-flex-grow: 1;
    height: 40px;       
    -webkit-align-self: center;
    align-self: center;
    border-bottom: 2px solid #62727b;
}
.searchbarSubmit{
    display: none;
}
.searchbarSubmitButton{
    display: block;
    margin: auto;
    margin-right: 15px;
    margin-left: 15px;
    height: 36px;
    width: 36px;
}

Chrome 1x

Firefox 1x

Chrome 0.5x

Firefox 0.5x

UPD: добавлены скриншоты с описанием проблемы в Webkit.

Webkit 0.5x

Webkit 0.25x

6
  • Иконка поиска выходит за пределы блока?
    – zhurof
    20 июн 2018 в 12:33
  • Нет, хотел прикрепить скриншоты, но никак не получается сделать это через приложение, одну минуту.
    – vo1d
    20 июн 2018 в 12:33
  • 1
    Для инпута min-width:0 задайте. Firefox задаёт текстовым полям минимальную ширину.
    – zhurof
    20 июн 2018 в 12:34
  • @ГеннадийЖуров добавил скриншоты проблемы
    – vo1d
    20 июн 2018 в 12:35
  • @ГеннадийЖуров помогло
    – vo1d
    20 июн 2018 в 12:44

1 ответ 1

1

* {
  font-size: 14px;
  box-sizing: border-box;
  margin: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
  font-family: Roboto, sans-serif;
  font-weight: 500;
}

input {
  outline: none;
  border: none;
}

html,
body {
  min-height: 100%;
  width: 100%;
  -ms-flex-direction: column;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  fill: #62727b;
}

.overlay {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: #000;
  overflow-y: auto;
  opacity: 0.8;
}

.searchbar {
  display: flex;
  overflow: hidden;
  position: fixed;
  top: 10px;
  left: 10%;
  right: 10%;
  border-radius: 12px;
  z-index: 5002;
  height: 50px;
  width: 80%;
  background: #fff;
}

.searchbarCloseButton {
  display: block;
  margin: auto;
  margin-right: 15px;
  margin-left: 15px;
  height: 36px;
  width: 36px;
}

.searchbarInput {
  width: 200px;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
  transition: 0.6s;
  font-weight: 500;
  font-size: 20px;
  background: none;
  -webkit-box-flex: 1;
  flex: 1 1 auto;
  height: 40px;
  -webkit-align-self: center;
  align-self: center;
  border-bottom: 2px solid #62727b;
}

.searchbarSubmit {
  display: none;
}

.searchbarSubmitButton {
  display: block;
  margin: auto;
  margin-right: 15px;
  margin-left: 15px;
  height: 36px;
  width: 36px;
}
<div class="overlay">
</div>
<div class="searchbar">
  <div class="searchbarCloseButton">
    <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24">
					<path class="searchbarCloseIcon" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
					<path d="M0 0h24v24H0z" fill="none"/>
				</svg>
  </div>
  <input class="searchbarInput" type="search" placeholder="Поиск" name="searchInput">
  <label class="searchbarSubmitButton">
				<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24">
					<path class="searchSubmitIcon" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
    				<path d="M0 0h24v24H0z" fill="none"/>
				</svg>
				<input class="searchbarSubmit" type="submit" name="searchSubmit">
			</label>
</div>

3
  • Спасибо, всё работает. Только не особо понятно почему именно такие свойства надо прописать.
    – vo1d
    20 июн 2018 в 12:57
  • Про min-width уже писал. flex:1 1 0 - сокращённая запись от flex-grow:1;flex-shrink:1,flex-basis:auto. То есть и растягивается и сжимается относительно своей ширины. В случае с Webkit поле просто не растягивалось.
    – zhurof
    20 июн 2018 в 13:03
  • Хорошо, спасибо вам.
    – vo1d
    20 июн 2018 в 13:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.