[Webkit-unassigned] [Bug 215731] New: caret disappears when composited element overlaps transparent input

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=215731

            Bug ID: 215731
           Summary: caret disappears when composited element overlaps
                    transparent input
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: All
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: ldebeasi at gmail.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Created attachment 407011

  --> https://bugs.webkit.org/attachment.cgi?id=407011&action=review

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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20200821/1acd8ce5/attachment-0001.htm>