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

.list-group-flush not working properly with Chrome 59 #23013

Closed
mcrapts opened this issue Jul 7, 2017 · 5 comments
Closed

.list-group-flush not working properly with Chrome 59 #23013

mcrapts opened this issue Jul 7, 2017 · 5 comments
Labels
css has-pr v4

Comments

@mcrapts
Copy link

mcrapts commented Jul 7, 2017 •
edited

The following code used to work just fine in all browsers:

<div class="card mx-3 my-3" style="width: 300px">
    <h5 class="card-header list-group-header text-muted">Card header</h5>
    <div class="selection list-group-flush">
        <span class="list-group-item list-group-item-action">List item A</span>
        <span class="list-group-item list-group-item-action">List item B</span>
        <span class="list-group-item list-group-item-action">List item C</span>
        <span class="list-group-item list-group-item-action">List item D</span>
    </div>
</div>

Since the Chrome 59 update however, it does not work properly. The borders between the list items are missing.

Result in Edge (expected result):
image

Result in Chrome 59:
image

jsfiddle: https://jsfiddle.net/6oggze6h/
@mcrapts mcrapts changed the title .list-group-flush not working properly with Chrome 59 w/ hw acceleration .list-group-flush not working properly with Chrome 59 Jul 7, 2017
@gijsbotje
Copy link
Contributor

works fine for me on macbook pro macOS 10.12.5 with chrome 59.0.3071.115

@mcrapts
Copy link
Author

mcrapts commented Jul 9, 2017 •
edited

That's weird. I have been able to reproduce the issue on macOS, but not on a different (similarly specced) Windows computer. I'm puzzled.

Edit: jsfiddle added for clarification https://jsfiddle.net/6oggze6h/

@ghiscoding
Copy link

It also works fine for me on Windows 10 with Chrome Beta version 60.0.3112.50

@caseyjhol
Copy link
Contributor

caseyjhol commented Jul 10, 2017 •
edited

I'm experiencing this same issue - Chrome 59.0.3071.115 on Windows 10. Setting the border to a solid color or rgba(0, 0, 0, 1) makes it visible. Also, removing either border-left: 0 or border-right: 0 on .list-group-item makes the borders visible.

Here is a reduced test case: https://jsfiddle.net/caseyjhol/vpugbs2g/3/

@mcrapts
Copy link
Author

mcrapts commented Jul 10, 2017

Issue isn't appearing in beta version 60.0.3112.50 for me. So it appears to be a Chrome bug and not a Bootstrap issue.

chiraggmodi pushed a commit to chiraggmodi/bootstrap that referenced this issue Jul 17, 2017
@chiragatlas
Fix issue twbs#23013
1af1b5c
@chiraggmodi chiraggmodi mentioned this issue Jul 17, 2017
Merged
chiraggmodi pushed a commit to chiraggmodi/bootstrap that referenced this issue Jul 17, 2017
@chiragatlas
Fix twbs#23013: Add boder-top:0
18ee34d
@mdo mdo added the has-pr label Aug 4, 2017
@mdo mdo closed this as completed in #23108 Oct 2, 2017
@mdo mdo mentioned this issue Oct 2, 2017
Closed
mdo pushed a commit that referenced this issue Oct 2, 2017
@chiraggmodi @mdo
Fix #23013: Add boder-top:0 in .list-group-flush .list-group-item (#2…
deced1b 
…3108)
@mdo mdo added this to Shipped in v4 Beta 2 Oct 2, 2017
@mdo mdo removed this from Shipped in v4 Beta 2 Oct 18, 2017
@mdo mdo mentioned this issue Oct 18, 2017
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css has-pr v4
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@mdo @ghiscoding @Johann-S @caseyjhol @gijsbotje @mcrapts