Почему Chrome игнорирует ссылку только на одну грань трехмерного куба? - PullRequest
Новая
       16

Почему Chrome игнорирует ссылку только на одну грань трехмерного куба?

0 голосов
/ 05 апреля 2019

Я сделал трехмерный куб, абсолютно поместив 6 граней, затем вращая их.

Я добавляю ссылку, например <a href="test.html">0. Front Link</a>, к каждой грани.

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

Ожидаемое поведение : при вращении куба нажатие на ссылку на показе лица должно привести к test.html.

Фактическое поведение : - в Firefox 66 все работает как положено.- в Chromium 73 пять из шести ссылок работают должным образом, но ссылка на «обратной стороне» (<a href="test.html">5. Back Link</a>) не работает.Ссылка есть в HTML, и если я нажму на нее в Dev Tools, она будет работать правильно. 

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="description" content="3d Cube, 2019 version">
    <meta name="author" content="John Lynch">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- font awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
    <link rel="stylesheet" href="style.css">
    <title>
      3d Cube
    </title>
</head>

<body>

  <section class="container">
      <div id="cube">
        <div class="face" id="front">
          <a href="test.html">0. Front Link</a>
        </div>
        <div class="face" id="left">
          <a href="test.html">1. Left Link</a>
        </div>
        <div class="face" id="right">
          <a href="test.html">2. Right Link</a>
        </div>
        <div class="face" id="bottom">
          <a href="test.html">3. Bottom Link</a>
        </div>
        <div class="face" id="top">
          <a href="test.html">4. Top Link</a>          
        </div>
        <div class="face" id="back">
          <a href="test.html">5. Back Link</a>
        </div>
      </div>
    </section>

    <section class="row">
      <button class="btn-floating btn-large" id="btn-face0" onclick="rot(0)"><i class="material-icons">filter_none</i></button>
      <button class="btn-floating btn-large" id="btn-face1" onclick="rot(1)"><i class="material-icons">filter_1</i></button>
      <button class="btn-floating btn-large" id="btn-face2" onclick="rot(2)"><i class="material-icons">filter_2</i></button>
      <button class="btn-floating btn-large" id="btn-face3" onclick="rot(3)"><i class="material-icons">filter_3</i></button>
      <button class="btn-floating btn-large" id="btn-face4" onclick="rot(4)"><i class="material-icons">filter_4</i></button>
      <button class="btn-floating btn-large" id="btn-face5" onclick="rot(5)"><i class="material-icons">filter_5</i></button>
    </section>

  <script>
    function rot(face) {
      document.getElementById('cube').classList = `rotate${face}`;
    }
  </script>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script type="text/javascript" src="scripts/index.js"></script>

</body>

</html>

/*
Display content on the faces of a rotating cube
*/

* {
  box-sizing: border-box;
  text-decoration: none;
}

html, body {
  height:100%;
  width: 100%;
  padding: 1.4vmax;
  overflow: hidden;
  background-color: black;
  --cube-dim: 40vmax;
  --half-cube-dim: calc(var(--cube-dim)*0.5);
  --minus-half-cube-dim: calc(var(--cube-dim)*-0.5);
}

#cube {
  transform-style: preserve-3d;
  /*perspective: 16000px;
  perspective-origin: center center;*/
  backface-visibility: hidden;
  position: absolute;
  top: calc(50% - var(--half-cube-dim));
  left: calc(50% - var(--half-cube-dim));
  transform-origin: center center;
  font-size: 8vmin;
}

.face {
  position: absolute;
  width: var(--cube-dim);
  height: var(--cube-dim);
  border-radius: 3%;
  background-color: black;
  opacity: 1.0;
  box-shadow: 0 0 0 2px;
  border: 4px solid gold;
  /*margin: var(--half-cube-dim);*/
}

button {
    position: absolute;
    width: 10vw;
    height: 5vh;
    font-size: 2vw;
    color: #ffbb00;
    background-color: #2020ff;
    border-radius: 5px;
}
.rotate0 {
  transition-timing-function: ease-out;
  transition: 0.8s;
  transform: translateX(0) translateY(0) rotateX(0deg) rotateY(0deg);
}

.rotate1 {
  transition-timing-function: ease-out;
  transition: 0.8s;
  transform: translateY(0) translateX(var(--half-cube-dim)) rotateY(90deg);
}

.rotate2 {
  transition-timing-function: ease-out;
  transition: 0.8s;
  transform: translateY(0) translateX(var(--half-cube-dim)) rotateY(-90deg);
}

.rotate3 {
  transition-timing-function: ease-out;
  transition: 0.8s;
  transform: translateX(0) translateY(var(--half-cube-dim)) rotateX(90deg);
}

.rotate4 {
  transition-timing-function: ease-out;
  transition: 0.8s;
  transform: translateX(0) translateY(var(--half-cube-dim)) rotateX(-90deg);
}

.rotate5 {
  transition-timing-function: ease-out;
  transition: 0.8s;
  transform: translateY(0) translateX(var(--cube-dim)) rotateY(180deg);
}

/*=================================================*/

#front {
  transform: rotate3d(0, 1, 0, 0deg) translateZ(var(--half-cube-dim));
}

#right {
  transform: rotate3d(0, 1, 0, 90deg) translateZ(var(--half-cube-dim));
}

#back {
  transform: rotate3d(0, 1, 0, 180deg) translateZ(var(--half-cube-dim));
}

#left {
  transform: rotate3d(0, 1, 0, -90deg) translateZ(var(--half-cube-dim));
}

#top {
  transform: rotate3d(1, 0, 0, 90deg) translateZ(var(--half-cube-dim));
}

#bottom {
  transform: rotate3d(1, 0, 0, -90deg) translateZ(var(--half-cube-dim));
}

.material-icons {
  font-size: 4vmin;
}

.test-container {
  background: #331144;
  color: #ffaa00;
  position: absolute;
  width: 100%;
  height: 100%;
  /*top: 50%;
  left: 50%;*/
}

.test-container h1 {
  font-size: 4vw;
  top: 40%;
  left: 40%;
  position: absolute;
}

Я искал ответ о ссылках, не работающих в 3D, но ничего не могу найти.Я изучил код в Dev Tools и в моем редакторе, но не могу найти ничего, что отличало бы эту ссылку от ее кузенов.

Я озадачен.

1 Ответ

1 голос
/ 05 апреля 2019

Я не очень знаком с 3D CSS, но из экспериментов я обнаружил, что виновником является свойство backface-visibility: hidden; в div "cube".

Когда у div есть отбраковка задних сторон иВы поворачиваете его в сторону от вида (т.е. камеры / пользователя / чего бы то ни было), затем он отбраковывается (конечно).Это означает, что A) он не визуализируется визуально и B) он не взаимодействует с мышью.Теперь, когда вы поворачиваете дочерний элемент этого выделенного элемента div, чтобы он фактически смотрел на представление, этот дочерний элемент div должен отображаться и взаимодействовать с мышью как обычно, даже если родительзабито.К сожалению, Chromium 73 либо содержит ошибку, либо интерпретирует вещи по-разному, так что дочерний элемент элемента, отобранного с обратной стороны, который повернут, чтобы повернуться лицом к виду , отображается , как и ожидалось, но не не взаимодействует с мышью.

Ниже приведен упрощенный пример того, что я имею в виду.Если вы запустите его в Chromium 73 , то вы увидите обе кнопки, но с помощью мыши нельзя манипулировать первой: 

<!doctype html>
<html>
    <head>
        <style>
            .parent {
                background-color: red;
                transform: rotateY(180deg);
            }
            .child {
                background-color: blue;
                transform: rotateY(180deg);
            }
            .culled {
                backface-visibility: hidden;
            }
            .space { padding: 1em; }
        </style>
    </head>
    <body>
        <div class='parent culled'>
            <button class='child'>hi</button>
        </div>
        <div class='space'></div>
        <div class='parent'>
            <button class='child'>hi</button>
        </div>
    </body>
</html>
...