为什么我的 CSS Flip-Card 背面输入在点击时获得焦点？

Question

我制作了一个简单的 CSS Flip 卡；一切都按预期工作，除了一件事，我注意到，如果我翻转卡片，会有一个区域（大约可见输入的一半），其中单击会触发卡片背面输入的焦点。

这会导致一些问题，因为自动完成将填充背面的输入，并且我无法输入当前的输入，因为除非我单击它的另一半，否则它不会获得焦点。

这是 stackblitz 的例子。如果您单击“忘记密码？”，它将打开并显示显示“登录”面孔的卡片。通过一次输入，卡片将翻转并显示另一张脸，您可以在此处看到上述行为。

https://stackblitz.com/edit/angular-h8pca9

您还可以看到，如果使用 DevTools 检查，一半输入检查背面控件，另一半检查当前输入：

注意这里检查器显示#username输入

#email当我将鼠标悬停在同一输入的右侧时，它显示了输入

Answer 1

测试

我在 Firefox 和 Chrome 上测试了你的代码。下面分别介绍一下存在的问题。

• 火狐。在 Firefox 中，输入字段按.card-face__back预期工作：当您单击输入字段时，焦点将转到预期字段。然而，这里存在的问题是，如果该元素已应用但未应用任何类型，则该元素backface-visibility不适用于 Firefoxpreserve-3d transform。
• 铬合金。在 Chrome 中，问题在于输入字段.card-face__back有奇怪的交互。正如您所提到的，单击输入字段的前半部分（左侧）会使输入字段.card-face__front获得焦点。单击输入字段的后半部分（右侧）会使焦点按预期给出。然而，即使没有应用于元素，它backface-visibility也能在 Chrome 中完美运行。transform

我不确定每个浏览器运行什么确切程序来实现两种不同的结果，因此我无法引用任何官方来源和/或算法来说明它们运行方式不同的原因。然而，我对为什么它在 Chrome 上不起作用（有缺陷的点击行为）有一个合理的解释。

backface-visibility

backface-visibility只是隐藏该项目，使其不被视觉看到。按照这种逻辑，如果我们可以单击该元素（但我们不能，因为从视觉上看，该项目不存在！），那么就没有什么可以阻止我们与该元素进行交互。由于某种原因，Chrome 允许我们在您的特定场景中与元素进行交互。我不知道为什么会发生这种情况。按理说，隐藏元素不应该被点击，但我们可以。

解决方案

现实生活中的 3D 卡有正面和背面。在当前代码中，卡片的正面和背面共享相同的空间（在 3D 空间中）。在现实生活中的卡片中，卡片的正面和背面都有一个分隔符（卡片的厚度，例如1mm）。translateZ我们可以通过添加模拟现实生活中的卡片 3D 空间分离来模仿这种行为。

translateZ(1px)在代码中添加到卡片的正面和背面是可行的。从逻辑上讲，这是因为当您翻转卡片时，卡片的正面位于卡片背面（当前位于正面）后面 2px 处。这确保了卡片正面的项目（隐藏的）根本无法与之交互（就像绝对定位的元素，但由于其设置z-index为 -1 而位于某物后面）；因此，您可以正确地关注您的电子邮件输入字段.card-face__back。当卡的正面确实面向用户时，相同的逻辑也适用。

我们分别translateZ(1px)对卡片的正面和背面进行添加，而不是和 translateZ(1px)，translateZ(-1px)因为卡片的背面首先在 Y 轴上旋转了 180 度；因此，我们需要将-1px值反转为1px。或者，您也可以将translateZ(1px)第一个之前的内容涂rotateY(180deg)在卡背面。

只需将此 CSS 添加到您的.card-face__front和.card-face__back. 该解决方案适用于 Firefox 和 Chrome。以下是供您运行的代码： https: //angular-krh29n.stackblitz.io。

.scene .flip-card .card-face__front {
   transform: translateZ(1px);
 }
.scene .flip-card .card-face__back {
     transform: translateZ(-1px) rotateY(180deg);
}