Contrasting box-shadow behavior observed in Chrome versus Firefox

Question

Contrasting box-shadow behavior observed in Chrome versus Firefox

I'm working on a project and aiming to achieve this design:

https://i.stack.imgur.com/YflaU.png

To test it out, I created a sample page with the following code:

p {
  display: inline;
  background-color: yellow;
  box-shadow: 10px 0px 0px red, -10px 0px 0px red;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <p>Here will be a text. Here will be a text... (text content continues)
    </p>

</body>

</html>

Upon testing, I noticed that the appearance varies between Chrome and Firefox. While Chrome's version looks fine to me, I'm not satisfied with how it displays in Firefox.

Chrome https://i.stack.imgur.com/IkbrP.png

Firefox https://i.stack.imgur.com/M2f4d.png

Is there a way to make the design look consistent across both browsers? I'm open to any solution that doesn't necessarily involve using the box-shadow property.

css

Answer 1

Answer №1

Have you considered using box-decoration-break:clone for your needs?

p {
  display: inline;
  background-color: yellow;
  box-shadow: 10px 0px 0px red, -10px 0px 0px red;
  box-decoration-break: clone;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <p>This is where your text will go. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut diam vel libero vestibulum facilisis commodo auctor velit. Proin tincidunt scelerisque nisl eget varius.</p>

</body>

</html>

Answer 2

Have you considered using box-decoration-break:clone for your needs?

p {
  display: inline;
  background-color: yellow;
  box-shadow: 10px 0px 0px red, -10px 0px 0px red;
  box-decoration-break: clone;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <p>This is where your text will go. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut diam vel libero vestibulum facilisis commodo auctor velit. Proin tincidunt scelerisque nisl eget varius.</p>

</body>

</html>

Answer 3

Answer №2

Addressing your query, I am sharing this solution -

Presenting a creative fix for you by utilizing :after to achieve the desired outcome as demonstrated in your image.

p {
  display: inline;
  line-height:20px;
  background-color: yellow;
  position:relative;
}
.p-wrapper{
  position:relative;
  display:inline-block;
}
.p-wrapper:after{
  content:'';
  background:#000;
  position:absolute;
  left:-10px;
  right:-10px;
  top:-10px;
  bottom:-10px;
  z-index:-1;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
<div class="p-wrapper">
  <p>Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.
    Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.Your text goes here. Your text goes here.
    Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.Your text goes here. Your text goes here. Your text goes here.
    Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.</p>
    </div>

</body>

</html>

Answer 4

Addressing your query, I am sharing this solution -

Presenting a creative fix for you by utilizing :after to achieve the desired outcome as demonstrated in your image.

p {
  display: inline;
  line-height:20px;
  background-color: yellow;
  position:relative;
}
.p-wrapper{
  position:relative;
  display:inline-block;
}
.p-wrapper:after{
  content:'';
  background:#000;
  position:absolute;
  left:-10px;
  right:-10px;
  top:-10px;
  bottom:-10px;
  z-index:-1;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
<div class="p-wrapper">
  <p>Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.
    Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.Your text goes here. Your text goes here.
    Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.Your text goes here. Your text goes here. Your text goes here.
    Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.</p>
    </div>

</body>

</html>

Contrasting box-shadow behavior observed in Chrome versus Firefox

Answer №1

Answer №2

Similar questions

What is the best way to mark a MenuItem as active within a Material UI Drawer component?

Is there a way to position a pseudoelement behind its parent yet still in front of its grandparent using absolute positioning?

Linking two div elements together with a circular connector at the termination point of the line

Can you explain the process of gathering texts based on CSS selector?

Develop a website using HTML and CSS for the front-end design, complemented by Java for the

MTG Life counter. Display fluctuations in count

Ways to restrict input text to a specific set of values

Formatting tabular rows to appear as headers

What is the reason that custom styling for a single react component instance does not function properly?

Aligning an SVG within a container div

Center the image and align the floated texts on each side horizontally

Issue with positioning Bootstrap tooltip on the right side causing it to not display correctly

The static background and fixed header are locked in a perpetual battle

"Troubleshooting: Why is Angular's Equalizer from Foundation not

How can I reset a CSS position sticky element using JavaScript?

What is the method to alter the color of an SVG source within an image tag?

What steps should I take to fix an error in my code?

React - z-index issue persists

Align navigation bar using Angular Material

What could be causing the blurriness in the image?