С использованием css 3d преобразований и перспективы, я не могу больше взаимодействовать с интерактивными элементами в Firefox, но это работает в Chrome / Safari - PullRequest
Новая
       33

С использованием css 3d преобразований и перспективы, я не могу больше взаимодействовать с интерактивными элементами в Firefox, но это работает в Chrome / Safari

2 голосов
/ 02 февраля 2020

Я создаю простую страницу с помощью паралакса, используя css 3D-преобразования. В chrome все отлично работает. В firefox эффекты параллакса работают хорошо, однако я больше не могу нажимать на кнопки или ссылки ... как будто что-то перед ними (но на самом деле, я ничего не могу придумать!).

Я много искал, но не смог найти причину. Вот ссылка на сайт

https://dev.dallinge.ch/wp/maismec/ Есть ли у вас какие-либо идеи, что блокирует работу ссылок / кнопок в firefox? Это ошибка?

Заранее спасибо!

Ответы [ 2 ]

4 голосов
/ 05 февраля 2020

Хотя у меня нет точного решения, у меня есть причина. После открытия Инспектора в Firefox я обнаружил, что ваши ссылки становятся кликабельными, если я отключаю: 

.site-content {
    -moz-transform-style: preserve-3d;
}

или если я установил его на: 

.site-content {
    -moz-transform-style: flat;
}

Этот стиль определен в все. css в строке 986.

Хотя я не могу говорить о лучшем использовании -moz-transform-style, я могу порекомендовать либо изучить, как заставить его работать с вашими слоями или отключить его на Firefox. Вы должны иметь возможность сохранить отличный 3D-эффект для других браузеров.

3 голосов
/ 05 февраля 2020

Я не использую CSS преобразования, которые часто, но, безусловно, существует перерасход свойства:

-moz-transform-style: preserve-3d.

Как статья w3schools указывает :

Это свойство должно использоваться вместе со свойством transform.

Это также упоминалось предыдущим ответчиком @Jenny Pittman, когда я писал это, поэтому я надеюсь, ты не будешь злиться:)

Так что я сделал, я отключил этот кусок вашего кода: 

.site-content > .inside #primary #main > article > .entry-content {
    -moz-transform-style: preserve-3d;
}

в файле all.css в строке 999.

И чтобы другие элементы правильно отображались, я добавил position: relative в ваши основные разделы CSS примерно так: 

body:not(.has-sidebar):not(.search):not(.archive).home .entry-header-single > *, body:not(.has-sidebar):not(.search):not(.archive).home .page-content > *, body:not(.has-sidebar):not(.search):not(.archive).home .entry-footer > *, body:not(.has-sidebar):not(.search):not(.archive).home .entry-content-single > *, body:not(.has-sidebar):not(.search):not(.archive).home .post-navigation, body:not(.has-sidebar):not(.search):not(.archive).home .uagb-section__inner-wrap, body:not(.has-sidebar):not(.search):not(.archive).home .wp-block-group__inner-container {
    max-width: 1000px;
    width: 82%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

в файле all.css в строке 881.

Редактировать:

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

<div class="entry-content entry-content-single">
  ...
  <div class="wp-block-image size-full is-resized parallax">...</div>
  <div class="wp-block-group team">...</div>
</div>

и поместить их рядом с ним следующим образом: 

<div class="entry-content entry-content-single">...</div>
<div class="wp-block-image size-full is-resized parallax">...</div>
<div class="wp-block-group team">...</div>

Это должно помочь.

Также вы, вероятно, хотите отключить это: 

.site-content > .inside #primary #main > article {
    -moz-transform-style: preserve-3d;
}

в файле all.css в строке 997.

...