15

This started today (2019-12-05), and it only happens in old browser versions -- so it might be related to the recent changes in Stack Overflow's legacy CSS.

Screen shot:

enter image description here

I saw this in Safari 9.1 and Chromium 55.0.


UPDATE (2019-12-26): Today the change was just reversed in some browsers. Now the arrows and counter are on the side again in Chromium 55.0, but not in Safari 9.1.

5
  • 2
    Please specify what older browser versions you're seeing this in? Commented Dec 5, 2019 at 4:59
  • 1
    Safari 9.1 and Chromium 55.0.
    – jkdev
    Commented Dec 5, 2019 at 5:01
  • 1
    And it occurs at any browser width, including full-screen.
    – jkdev
    Commented Dec 5, 2019 at 5:13
  • 3
    Firefox 28.0.2. Not just SO. Also blue bonus awarded box spans entire width.
    – philipxy
    Commented Dec 5, 2019 at 6:17
  • 2
    I also see the same problem on Firefox 43.* on windows 7. It seems the problem is FF 43 doesn't understand the "display: grid" appear in the css for 'post-layout'. If I manually change that to display: inline-flex, the page will render properly. Commented Dec 5, 2019 at 21:21

2 Answers 2

12

Full unprefixed support for CSS Grid on desktop requires Edge 16+, Firefox 52+, Chrome 57+, Safari 10.1+ or Opera 44+.

In older browsers, CSS Grid properties and values are not recognized, and thus the layout does not work as intended.

HTML:

<div class="post-layout"> 
    <div class="votecell post-layout--left">...</div>
    <div class="answercell post-layout--right">...</div>
    <div class="js-post-notices post-layout--full">
        </div>
    <div class="post-layout--right">...</div>
</div>

CSS (https://meta.stackoverflow.com/content/Sites/stackoverflowmeta/primary.css):

.post-layout {
    display: grid;
    grid-template-columns: -webkit-max-content 1fr;
    grid-template-columns: max-content 1fr
}

.post-layout--left {
    grid-column: 1;
    width: auto
}

.post-layout--left,
.post-layout--left.votecell {
    width: auto;
    padding-right: 15px
}

.post-layout--right {
    grid-column: 2;
    width: auto;
    min-width: 0
}

.post-layout--right .post-text,
.post-layout--right .comments {
    width: 100%
}

.post-layout--full {
    grid-column: 1 / 3
}

.grid-layout {
    display: grid;
    grid-gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))
}

In recent versions of Opera and Firefox, which do support CSS grid, I was able to reproduce the arrows/counter centering by changing grid-column: 1; to grid-column: 2;.

7

We got rid of a lot of prefixing that is no longer needed based on our browser support.

3
  • 1
    When did that page come into existence? I've always pointed to this Meta SE FAQ... Commented Dec 5, 2019 at 14:21
  • 2
    Assuming the browserl.ist visualization is correct, why are you only supporting one version of Chrome on Android not two like for every other browser? Commented Dec 5, 2019 at 15:05
  • 2
    "Global coverage:74.88%" Is there really a good reason to exclude one quarter of the possible audience? Commented Dec 10, 2019 at 12:59

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .