Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

IE 10/11/Edge custom control indicators in a parent element with column-count do not render on the last column #29607

Closed
mattywong opened this issue Oct 30, 2019 · 2 comments
Closed

IE 10/11/Edge custom control indicators in a parent element with column-count do not render on the last column #29607

mattywong opened this issue Oct 30, 2019 · 2 comments
Labels
browser-bug css has-pr v4

Comments

@mattywong
Copy link

mattywong commented Oct 30, 2019 •
edited

  • Operating system and version (Windows, macOS, Android, iOS, Win10 Mobile)
    Windows 10
  • Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser)
    Reproduced on IE Edge, IE 11 and IE 10
  • Reduced test case and suggested fix using CodePen or JS Bin

Screenshot of issue:
ie-custom-control

Codepen reproduction:
https://codepen.io/mattywong/full/NWWajYJ

Seems like the fix is to create a new stacking context on custom-control to get it rendering correctly (ideally z-index, though transform and opacity will also create a new stacking context).
@mdo
Copy link
Member

mdo commented Mar 23, 2020

Confirmed this is an issue, and that z-index: 1 on the .custom-check resolves the issue. Unsure what other potential problems that introduces though.

@mdo mdo mentioned this issue May 13, 2020
Merged
mdo added a commit that referenced this issue May 13, 2020
@mdo
v4: Add z-index to .custom-check to fix custom checks in CSS columns
dcbd8ce 
For some reason, custom checks in CSS columns need a new stacking order to maintain visibility. This PR adds `z-index: 1` to trigger that new stacking order. Since v5's forms are being redone entirely, and we're dropping IE10/11 there, I think this is totally fine to ship with v4 only. Will need to check v5's forms it in Edge though.

Fixes #29607.
@mdo mdo added this to Inbox in v4.5.1 via automation May 13, 2020
XhmikosR added a commit that referenced this issue Jun 4, 2020
@mdo @XhmikosR
v4: Add z-index to .custom-check to fix custom checks in CSS columns (#…
f4a7888 
…30810)

For some reason, custom checks in CSS columns need a new stacking order to maintain visibility. This PR adds `z-index: 1` to trigger that new stacking order. Since v5's forms are being redone entirely, and we're dropping IE10/11 there, I think this is totally fine to ship with v4 only. Will need to check v5's forms it in Edge though.

Fixes #29607.

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
@XhmikosR
Copy link
Member

XhmikosR commented Jun 4, 2020

Fixed in #30810

@XhmikosR XhmikosR closed this as completed Jun 4, 2020
@XhmikosR XhmikosR removed this from Inbox in v4.5.1 Jun 4, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
browser-bug css has-pr v4
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@mdo @XhmikosR @mattywong @MartijnCuppens