This fix should be reconsidered.

[bighoho123]

formalism/fieldset/base.scss

Line 33 in a10e70a

transform: translateZ(0); // Fix the border disappearing bug in Chrome

This fix is creating a local stacking context for each field based on their order in the DOM. And this will cause an issue in the following scenario:

.field-1
    .select
.field-2
    .textarea

Both .select and .textarea is using some custom components (not native formalism). They all have some kind of z-index defined in them.

If select list is too long, the z-index attribute of the list won't work due to the ancestor's(.field-set__inner) local stacking context and will always show behind the .textarea

I noticed that this transform was introduced to solve an browser issue, wonder if there is another solution?

[bighoho123]

The same style exists for .form__group

[ben-rogerson]

Hey jinzhe, do you think a reasonable fix would be to z-index select elements above everything else?

[bighoho123]

I think the best way is to remove the transform on .form__group and .field-set__inner so that there isn't any local stacking context established. And try to solve the original issue via another approach.

I've remove it in my fork but since you had a note there as "// Fix the border disappearing bug in Chrome" so thought i'd ask first before making a pull request. Do you remember how to recreate this bug in the comment?

[ben-rogerson]

I believe that bug can be recreated by resizing the browser window. When it hits certain widths a 1px border disappears.
There are two separate bug fixes right there.