Блог

Главная - Вопросы по программированию - Исправлена ошибка отключения позиции в Safari

Исправлена ошибка отключения позиции в Safari

#html #css #safari #css-position #fixed

#HTML #css #safari #css-позиция #исправлено

Вопрос:

У меня есть всплывающая подсказка с фиксированной позицией, которая работает во всех браузерах, кроме Safari. В Safari всплывающая подсказка отключается родительским контейнером, который имеет свойства overflow: scroll

Есть идеи о том, как я могу это исправить?

Это скриншот того, как это должно выглядеть:

это скриншот того, как это должно выглядеть

Вот как это выглядит в Safari:

введите описание изображения здесь

Это свойства всплывающей подсказки:

         .announcement {
          position: fixed;
          width: 3.1rem;
          height: 3.1rem;
          background-image: url("./../assets/icons/announcement-alert-right.svg");
          background-size: cover;
          margin: 0 0 0 -2.8rem;
          z-index: 1;

          amp;:hover {
            margin: -3.6rem 0 0 -14.8rem;
            width: 15.3rem;
            height: 6.7rem;
            background-image: url("./../assets/icons/announcement-profile.svg");
          }

          @media screen and (max-width: $desktop) {
            display: none;
          }
        }

Это точка зрения родителя:

 .profile {
  position: fixed;
  z-index: map-get($zindex, sidebar);
  right: 0;
  width: 15%;
  height: 100%;
  transition: 0.5s;
  padding: 3rem;
  box-shadow: 0 1.5rem 3rem $color-shadow;
  background-color: $color-white;  
  overflow: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;

  amp;::-webkit-scrollbar {
    display: none;
  }
}

Я пробовал несколько разных исправлений, таких как:
-webkit-transform: translateZ(0); transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); z-index:9999 !important) и ни один из них не работает.

Любая помощь будет высоко оценена! Спасибо!

Комментарии:

1. Попробуйте использовать z-index: 1000 для элемента.

2. Можете ли вы также показать свойства родительского элемента?

3. @About7Codes z-index: 1000 не работает, добавление важного тега тоже не работает

4. @AHaworth Я добавил свойства родительского

5. Вы только что попробовали overflow: visible на родительском, просто чтобы увидеть результат?

Ответ №1:

Не зная вашего html-кода, я предположил, что родительский контейнер и элемент подсказки не находятся на одном уровне, поэтому, даже если вы увеличите значение z-index, оно не изменится. Поместите элемент на тот же уровень, который будет работать.Что-то вроде этого

 <parent-container>
//parent content
</parent-container>
<tooltip-element>
//tooltip-content
</tooltip-element> //same level

Ответ №2:

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

Комментарии:

1. Я не думаю, что это так. Я добавил значение индекса z, превышающее значение родительского элемента, и оно ничего не делает. Я добавил родительские свойства, чтобы вы могли их увидеть

Ответ №3:

Держу пари, что, возможно, вам нужно будет разделить position: fixed overflow теги and на два вложенных класса div в Safari? Я знаю, что это может быть немного раздражающим и неудобным, но тогда таким образом — я не думаю, что z-index он будет заблокирован…

HTML:

 <div class="wrapper1">
  <div class="wrapper2">
    <div class="inner">
       /* Stuff inside here */  
    </div>
  </div>
</div>

CSS:

 .wrapper {
  ...
  position: fixed;
  ...
}

.wrapper2 {
  ...
  overflow: hidden;
  position: absolute;
  ...
}

Я бы не подумал, что overflow: scroll это повлияет на какие-либо z-index свойства, но посмотрим. Удачи в поиске решения, надеюсь, я немного помог!

Метки: