0

So, I have the following piece of code:

<p class="paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas repellendus quos maxime, aliquid, ab eum consequatur minima facilis ipsa magnam distinctio nihil vel, excepturi placeat? Voluptate neque natus quibusdam asperiores?</p>

@import url('https://fonts.googleapis.com/css2?family=DM+Sans&display=swap');

.paragraph {
  margin: 0;
  background: salmon;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: -0.5px;
}

.paragraph::before {
  content: "";
  margin-bottom: -0.405em;
  display: flow-root;
}

.paragraph::after {
  content: "";
  margin-top: -0.409em;
  display: flow-root;
}

https://codepen.io/pollx/details/jOGqByv

And this is the result in the different browsers: Chrome v96.0.4664.55 enter image description here

Firefox v94.0.2 enter image description here

Safari v15.1 (17612.2.9.1.20) enter image description here

Chrome and Firefox have the same outcome (the text container being cropped at the top & bottom). Safari on the other hand looks a bit different. MDN says the display:root-flow should be supported in Safari > v12.5

Not quite sure where the difference in the Safari image comes from

EDIT

Safari Version 15.1 (17612.2.9.1.20) vs. Safari Technology Preview Release 136 (Safari 15.4, WebKit 17613.1.9.2) + CSS.normalize

enter image description here

Leaving this here if one day the Webkit support group decides to give some light to the issue

pollx
  • 643
  • 9
  • 21

1 Answers1

-1

This is probably due to the default settings of the browser. For example Chrome and Safari have different default settings, which means that the font and everything else differs.

At this point you need to normalize these settings.

Remove browser default styling <!DOCTYPE>

EDIT: Use this in every browser just to make sure everything looks the same: https://necolas.github.io/normalize.css/

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Example</title>
<!-- you can even link more css -->
<link rel="stylesheet" href="normalize.css" />
<link rel="stylesheet" href="yourstyle.css" />
</head>
<body>

</body>
</html>
Ireducs
  • 14
  • 2