Липкая позиция в Safari с угловыми компонентами - PullRequest
Новая
       23

Липкая позиция в Safari с угловыми компонентами

0 голосов
/ 30 ноября 2018

Итак, position: sticky это круто, верно?И так же Angular, верно?Использование обоих в сочетании с Firefox и Chrome отлично работает.Проблема начинается с Safari.

Если вы создаете компонент Angular, у которого в качестве первого элемента в шаблоне есть элемент position: sticky, то Safari не знает, как с ним справиться.Пример:

AppComponent: 

@Component({
  template: '<sticky-component></sticky-component>'
})
export class AppComponent {}

StickyComponent: 

@Component({
  selector: 'sticky-component',
  template: '<div class="sticky">Should be sticky</div>',
  styles: [
    `
      .sticky {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
      }
    `
  ]
})
export class StickyComponent {}

Это создаст DOM, например: 

...
<sticky-component>
  <div class="sticky"></div>
</sticky-component>
...

Если вы физически пишете HTML без , то <sticky-component> прекрасно работает в Safari.Но так как родительский элемент липкого элемента является хост-элементом, это терпит неудачу.Попытка добавить липкий CSS к элементу хоста, похоже, тоже не работает.Кто-нибудь сталкивался с этой проблемой раньше или есть какое-то решение?Я знаю, что могу реализовать эту закрепленную функциональность, используя прослушиватели событий в Angular, но position: sticky ооочень проще.

Пример StackBlitz: https://stackblitz.com/edit/angular-jede8a (работает в Chrome / Firefox, но не в Safari)

Ответы [ 2 ]

0 голосов
/ 01 декабря 2018

Прежде, чем сделать липкую работу в сафари, вам нужно использовать position: -webkit-sticky;, но .....

После многих тестов и тыканий это просто не работает для Safari при установке position:stickyво вложенный элемент.Хороший пример, чтобы проверить, как это ведет себя, я обнаружил, что это codepen из этой записи.

Существует ошибка , сообщенная в webkit для этогоЭто также включает в себя тест, который я не полностью понял.

Итак, следующий вопрос: какова ваша причина поместить его во вложенный элемент?Можете ли вы обойти это?

0 голосов
/ 30 ноября 2018

Это скорее обходной путь, который может не соответствовать вашим потребностям, но я думаю, что он заслуживает ответа, поскольку действительно решает проблему (не обязательно так, как вы хотитеэто).

Если проблема с Safari - это пользовательский элемент (с чертой), используемый в DOM, вы можете избавиться от этого, указав другой селектор.Вместо 

selector: 'sticky-component',

вы могли бы иметь 

selector: 'div[sticky-component]',

, а затем использовать компонент, добавив атрибут. 

<div sticky-component></div>

Хотя, конечно, не идеально в этом случаеВ этом случае это правильный способ определения компонентов.Фактически, это часто делается с помощью пользовательских кнопок - например, сам материал использует этот шаблон: <button mat-button>.

...