Проблема с заголовком в Safari и iOS - PullRequest
Новая
       96

Проблема с заголовком в Safari и iOS

0 голосов
/ 08 мая 2020

У меня есть заголовок, в котором есть 2 DIV и 1 NAV - 

  <header>
    <!-- Header Images -->
    <div class="left-logo">
      <img src="images/aloha-logo.svg" />
    </div>
    <div class="right-logo">
      <img src="images/cart-icon.svg" />
      <span class="red-dot"></span>
      <span id="number">0</span>
    </div>
    <hr>
    <nav class="main-menu">
      <ul>
      <li id="nav-about"><a href="#jumpAbout">About</a></li>
      <li id="nav-shop"><a href="#jumpShop">Shop</a></li>
      <li id="nav-featured"><a href="#jumpFeatured">Featured</a></li>
      <li id="nav-updates"><a href="#jumpUpdates">Updates</a></li>
      </ul>
    </nav>
  </header>

Я использовал Firefox при создании этого сайта, и он отлично выглядит в мобильной версии с. Я загрузил его и посмотрел на свой телефон, и похоже, что меню навигации отображается за пределами заголовка.

Это веб-сайт - https://johnsaputo.net/aloha/

Скриншот с Safari на iPhone - https://johnsaputo.net/aloha/phone-screenshot.jpeg. Я проверил Firefox на iPhone, и он выглядит так же.

Отлично выглядит в Chrome на Ma c OS, но в Safari такая же проблема, как и на телефоне. .

Это CSS у меня для заголовка - 

header {
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: sticky;
  top: 0%;
  padding-top: 5px;
  height: 115px;
}

Я попытался удалить «position: sticky» и «top: 0%», чтобы посмотреть, скинул, но проблема осталась.

Это навигатор CSS - 

.main-menu {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-bottom: 20px;
}

.main-menu ul {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

hr {
  display: block;
  margin-bottom: 10px;
  border-width: 1px;
  color: #e6e6e6;
  opacity: 50%;
  width: 100%;
}

А это CSS в разделе Героев - 

.hero-banner {
  color: white;
  width: 100%;
  height: 400px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33)),
    url(../images/banner-girl.png), url(../images/flower-bkgd.jpg);
  background-position: left, center 50px, center;
  background-repeat: repeat, no-repeat, repeat;
  background-size: cover, contain, cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 50px;
}

Кто-нибудь знает, почему не отображается внутри раздела заголовка? Прекрасно работает в Chrome и Safari в ОС ma c, но не в Safari, и не в Safari или Firefix в iOS

1 Ответ

1 голос
/ 08 мая 2020

Не устанавливайте stati c height для вашего заголовка, тогда внутреннее содержимое может увеличить размер родительского элемента. Вместо этого вы можете использовать min-height.

...