Ngx-material-timepicker: iPhone CSS игнорирует «позиция: исправлена»
Я создал StackBlitz для воспроизведения: https://stackblitz.com/edit/angular-rdzdxx
Он имеет ngx-material-timepicker со следующим css:
.timepicker-backdrop-overlay[_ngcontent-c23] {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: rgba(0,0,0,.3);
z-index: 999;
pointer-events: auto;
}
Только в iPhone CSS заблокирован внутри дочернего компонента. В Android и на рабочем столе он работает как положено. Есть ли известное решение этого? 
Safari кажется непоследовательным в применении z-index. Есть ли содержащий div для вашего оверлея? Попробуйте также установить для него z-индекс, как в первом ответе на этот вопрос. Еще одно интересное обсуждение здесь.
Ответы 2
да @dmcgrandle, похоже, проблемы с z-индексом. Но я нашел один патч с кодом ниже. добавьте 'custom-tabbar' поверх панели вкладок и переопределите CSS, как показано ниже.
.custom-tabbar .mat-tab-body-active {
overflow: visible !important;
position: static;
}
Я не проверял в iPhone, но у меня есть проверка в эмуляторе. Надеюсь, это работа для вас.
Спасибо, это на самом деле то, что исправило это для меня. Я использовал его с ::ng-deep .mat-tab-body-active.
После тестирования это какое-то время оказалось недостаточно надежным для использования, по какой-то причине иногда это исправлялось, а иногда нет. Спасибо, в любом случае
Сообщается об ошибке для этой проблемы здесь https://bugs.webkit.org/show_bug.cgi?id=160953
Он говорит,
WebKit incorrectly clips position:fixed element, inside of its "position:relative; overflow: hidden" parent, IF that parent has "z-index" set
Это именно то, что происходит здесь. Элемент с фиксированным позиционированием класса .timepicker-overlay помещается внутри относительно позиционированного элемента .mat-tab-body-active, который имеет z-индекс 1.
Итак, что вы можете сделать сейчас, это переопределить этот стиль и установить z-index для активной вкладки на initial.
.mat-tab-body.mat-tab-body-active {
position: relative;
overflow-x: hidden;
overflow-y: auto;
z-index: initial; // set z-index to inital
flex-grow: 1;
}
Но если вы измените z-индекс .mat-tab-body.mat-tab-body-active, то mat-tab-group не будет работать должным образом. Потому что, когда мы изменим z-индекс активной вкладки на начальный, он будет двигаться назад в стеке mat-tab. Это поведение z-index по умолчанию. И вы можете взаимодействовать только с последней вкладкой.
Чтобы предотвратить это, мы можем установить свойство CSS pointer-events на .mat-tab-body следующим образом.
.mat-tab-body{
pointer-events: none;
}
.mat-tab-body.mat-tab-body-active {
position: relative;
overflow-x: hidden;
overflow-y: auto;
z-index: initial;
flex-grow: 1;
pointer-events: all;
}
вот рабочий демо.
Я протестировал его на стек браузера, вот скриншот того же. (этот снимок экрана для более старого ответа)
Похоже, это сработало, но сломало другие вкладки материалов при выходе из вкладки. Без z-индекса я не мог взаимодействовать ни с какими элементами управления на вкладках. Я попытался условно установить z-индекс для инициализации только на одной вкладке, но не смог заставить его работать.
Привет @MDave, я обновил ответ. На самом деле есть несколько возможных решений для преодоления этой проблемы с z-индексом, но использование событий указателя является самым простым и понятным. Я уверен, что это сработает для вас, если это не так, я поделюсь другими решениями.
ошибка появляется и на рабочем столе Safari