Bug 215731

Created attachment 407011 [details]
Code Reproduction

When an element that has been transformed overlaps an input with certain CSS applied, the input's caret disappears until content is added to the input. My first impression of this bug is that it has something to do with a composited element intersecting a transparent element. In the "Layers" tab in STP, it looks like the transparent input in the code reproduction is also getting composited since it intersects with the other composited label div.

Steps to reproduce:

1. Open attached code reproduction in Safari.
2. Click the blue input below the "Label Translate3d" text. Notice that the caret does not show up.
3. Type something into the input. Notice that the caret now shows up.
4. Click the blue input below the "Label TranslateY" text. Notice that the caret shows up.

This is a strange bug in that it only appears under certain circumstances:

1. The element that overlaps the input needs to be transformed using translate3d. The bug does not appear when using a 2d translate (such as translateY).
2. The input needs to be wrapped in a container that has `position: relative` applied. It looks like without this, the input is not composited even though it overlaps the transformed label.
3. The input needs to have a transparent background, no outline, and no border.

In our use case we are trying to wrap/customize the appearance of the native input element so that our inputs match inputs in native iOS and Android applications: https://ionicframework.com/docs/api/input.

Other information:

- This was tested in STP 112, but can be found in older versions of WebKit.
- Changing the background or border to a non-transparent value fixes the issue. I.e. `background: rgba(255, 255, 255, 0.01)`.
- Using translateY instead of translate3d in the code reproduction fixes the issue.