Safari 10 CSS.supports ('display', 'contents') возвращает true, даже если он не поддерживается?

Question

Согласно CanIUse.com, display:contents имеет некоторую поддержку во всех браузерах.

https://caniuse.com/#feat=css-display-contents

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

Итак, я использую CSS.supports('display', 'contents');, чтобы определить, поддерживается он или нет. В IE11 я должен сделать дополнительную проверку, потому что CSS не поддерживается.

Однако я ожидаю, что в Safari11 он должен вернуть true, а в Safari10 он должен вернуть false. Вместо этого оба возвращаются true. Пользовательский интерфейс ясно выглядит правильно в 11, однако в 10 есть нежелательные эффекты, потому что display: contents на самом деле не работает, поэтому мой класс патча не применяется и пользовательский интерфейс выглядит неправильно. Подтверждено, что это вызвано обнаружением недействительной функции.

Я искал решения для обнаружения Safari10 (а не Safari11), но не смог найти ничего, что работает.

Как точно определить из JavaScript, поддерживается ли эта функция или нет, я в Safari 10?

Answer 1

Вот решение:

@supports (display: contents) and (not (-webkit-flow-from: main)) {
  /**/
}

проверка display: contents поднимает только ложный флаг до Safari 11, поэтому я просматривал значения CSS в caniuse и нашел CSS Regions , что поддерживается только версиями IE, Edge и Safari до 11.
IE не поддерживает @supports, а Edge не поддерживает -webkit-flow-from. Пока Edge не поддерживает эту функцию (что, вероятно, не будет), она должна быть водонепроницаемой.

Кстати, я этого не проверял, поскольку у меня нет продуктов Apple. Если бы кто-то мог это сделать, это было бы здорово.