0

The Context

I’ve been trying to use a baseline grid for a over the last couple of weeks. and I couldn’t work out why the content would drift off the grid as it went down the page.

It seems like it’s a Chrome bug or a python http.server problem. (Or a combination of the two.)

three browsers next to each other showing their different rendering of the same content. This is the same content rendered in 3 different browsers. From left to right:

  1. Firefox 76.0.1
  2. Chrome Canary 85.0.4170.0
  3. Chrome 83.0.4103.97 (in incognito so there’s no extensions doing unexpected things)

I thought it had something to do with the way the baseline was being drawn, so I tried 3 different ways of drawing a grid: a repeating image, and 2 gradient bases ways. Turns out they all work in almost exactly the same way. The drift is caused by something in the way that the current production Chrome repeats backgrounds.

It’s working properly in canary, so fingers crossed, the problem will go away if I just wait.

The really confusing thing is that it displays differently depending on the server and the browser.

Image 1 shows the html file being served from my file system, and the second shows it being served via python -m http.server. Image 1 works exactly as one would expect, but image 2 shows the drift error. This means that it renders as expected in Canary, Firefox, Chrome from a file system and Chrome from GitHub pages but renders wrong when served by python's server.

The question(s)

  1. What is causing this?
  2. Is it documented? Are there other things I need to worry about?
  3. Can it be fixed with a flag or something like that?

Below is a live version, if the problem exists on your system you should see text starting to drift off the baseline by the second or third paragraph.

      :root {
        --line-height: 1.4rem;
        --baseline-color: hsla(194, 100%, 50%, 0.7);
        --color-paper: hsla(0, 0%, 100%, 0);
      }
      * {
        margin: 0;
        padding: 0;
      }
      div {
        display: inline-block;
        width: 24%;
        outline: 1px solid;
      }
      h1 {
        line-height: calc(var(--line-height) * 2);
        margin-bottom: calc(var(--line-height) * 1);
        transform: translateY(calc(var(--line-height) * 0.5));
        text-transform: capitalize;
      }
      p {
        line-height: calc(var(--line-height) * 1);
        margin-bottom: calc(var(--line-height) * 1);
        transform: translateY(calc(var(--line-height) * 0.3));
      }
      .one {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAABkCAYAAAC/zKGXAAAACXBIWXMAAAsSAAALEgHS3X78AAAAOklEQVRYhe3XsREAIAwDsYRj/1VYjQ3CCi4o5Vrn/ntmKtmKFAiCIAiCIAiCIAiCX+Duc6Nkzx6r6gH6HwZmQ2wUyAAAAABJRU5ErkJggg==");
        /* background-image: url(../line_marker.png); */
        background-size: 100% var(--line-height);
        background-repeat: repeat-y;
      }
      .two {
        background-image: linear-gradient(
          var(--baseline-color) 1px,
          transparent 1px
        );
        background-repeat: repeat-y;
        background-size: 100% var(--line-height);
      }
      .three {
        background: linear-gradient(
            var(--color-paper) 0%,
            var(--color-paper) calc(var(--line-height) - 1px),
            var(--baseline-color) calc(var(--line-height) - 1px),
            var(--baseline-color) var(--line-height)
          ),
          transparent;
        background-repeat: repeat-y;
        background-size: 100% var(--line-height);
      }
      .four {
        background: repeating-linear-gradient(
          white 0,
          white calc(var(--line-height) - 1px),
          var(--baseline-color) calc(var(--line-height))
        );
        background-size: cover;
        background-repeat: repeat-y;
        background-position-y: 1px;
      }
<div class="one">
      <h1>one</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
    </div>
    <div class="two">
      <h1>two</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
    </div>
    <div class="three">
      <h1>three</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
    </div>
    <div class="four">
      <h1>four</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
    </div>

1 Answer 1

0

It's hard to identify the issue with the images at first, but from that first image it looks like there are different fonts being rendered. I would suggest adding a font-family that is common like Times and try testing against the browsers again. See if they are at least rendering the same or even the same issue. The image you have shown seems to identify varying font-families based on what the browser is choosing as it's preference rather than what you would like chosen first.

3
  • I tested fixing the font, and it's definitely not related
    – Ben
    Jun 27, 2020 at 4:48
  • What if you add a CSS reset to it? CDN based one here: https://yarnpkg.com/en/package/normalize.css Jul 2, 2020 at 7:45
  • Did you spot the part about it rendering differently depending on the server?
    – Ben
    Jul 2, 2020 at 22:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.