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

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

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using CSS box-shadow to elevate an image

I am looking to create a background wrapper using CSS instead of an image. My goal is to add box shadow to achieve the same look as shown in the attached image. I understand that I will need to use the box-shadow property for this task. However, I am uns ...

htmlcss

What could be the reason for the loss of default browser focus on this accordion navigation?

Why is the browser default focus being lost on this accordion navigation? <div class="panel panel-default"> <div class="panel-heading"> <button aria-controls="collapseTwo" aria-selected="false" data-target="#collapseTwo" data-to ...

htmlcsstwitter-bootstrapaccessibility

How can you apply styling to one element when focusing on a different element at separate hierarchy levels?

I'm currently facing a challenge with styling a text field to expand when focused, and adding an "Add" button below it. The issue is that the elements are on different levels in the code structure, making it difficult to show or hide the button when f ...

cssvue.jssass

Ensure that the child element completely fills the parent element while maintaining a padding around the edges

How can I create a child div that fills 100% of the parent's width and height, including padding? I've tried using box-sizing = border-box, but it isn't working. I also attempted adding the box-sizing property to all elements with *, but tha ...

htmlcss

Adjusting the size of absolutely positioned div elements

Currently, I am immersed in a project that involves a full-size slideshow background with content positioned above it. The header and footer are required to have fixed margins at the top and bottom, respectively. The central part needs to be resizable wit ...

jquerycss

The image I want to show is invisible on the CSS custom radio button

I'm having trouble creating a custom radio button that displays the image I want. The current setup doesn't seem to be working as expected. label { font-weight: lighter; cursor:pointer; } input[type="radio"] { display:none; } in ...

cssbuttonradio-button

Can you provide some examples of CSS code snippets?

Can someone share some CSS codes similar to :hover that can be used in the : part for different effects? I tried looking it up but couldn't find much, so any help would be greatly appreciated. ...

htmlcsscss-selectors

Stop mega menu items from disappearing when hovered over

I'm currently working on a web page that features a mega menu. When I hover over the mega menu, it displays its items. However, when I try to hover over the items, they disappear. Here is the HTML code snippet: <li class="dropdown mega-dropdown m ...

javascriptjqueryhtmlcssbootstrap-4

Identifying collisions or contact between HTML elements with Angular 4

I've encountered an issue that I could use some help with. I am implementing CSS animations to move p elements horizontally inside a div at varying speeds. My goal is for them to change direction once they come into contact with each other. Any sugges ...

cssangulartypescriptanimation

CSS animations - transitioning opacity in and out

Looking to add some CSS animations to a menu but running into some issues. I've got the code below for the menu to fade in on hover, but can't quite figure out how to make it fade out smoothly as well. I've tried a few approaches, but all I ...

htmlcsscss-animations

Styling Labels with CSS Wildcard

I have been using the free NinjaForms plugin on my WordPress site. The default styling for labels is bold, but I prefer them to be lighter. Currently, I achieve this through CSS by targeting individual field IDs. However, this method becomes tedious when a ...

csswildcard

CSS - Resizing Images

I am experiencing an issue with the width of an image on my website. I want it to span 100% of the browser frame, but it is currently limited to only 1000px wide. Please take a look at: The image in question is located at the top of the page. Is there a ...

cssimagewidth

The hover effect is being applied exclusively to the final React component

When using next.js and tailwindCSS for styling, I created a custom component that includes tags. The issue arises when multiple instances of this component are placed on the page, as only the last one is getting the desired hover effect. "index.js" import ...

cssreactjsnext.jshover

The enhancement of clickable link padding

I'm having an issue with the padding around the link in my dropdown menu not being clickable. The text itself works fine when I hover over it, but the surrounding padding is inactive. I tried styling it as an inline-block as suggested, but that did no ...

csshyperlinkpadding

Two pictures, one adjusting in size and one staying the same size

I am working on a design with an 800px wide div that contains side-by-side images - one photo and one map. The challenge I am facing is that the map, which is 300px in width and has intricate details, becomes unusable when resized for smaller screens. I wa ...

htmlcssresponsive-designimage-resizing

Scrolling horizontally in Bootstrap 4 is a breeze

I'm having trouble implementing a horizontal scroll for a set of cards on mobile view with @media only screen and (max-width : 480px). I've checked out various resources, such as this one, but none seem to be working for me. One possible issue co ...

htmlcssbootstrap-4horizontal-scrolling

Do colors appear differently on various screens?

I've noticed that the background color #1ABC9B appears differently on various monitors when viewing my website. On MAC systems and smart phones, it appears as a lighter shade of green compared to other laptops where it appears darker. What could be ca ...

csscolors

What could be causing the misalignment of the Datepicker calendar in Material UI?

I have integrated a datepicker using the library "@mui/x-date-pickers/DatePicker". import { DatePicker } from "@mui/x-date-pickers/DatePicker"; import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment"; import { Locali ...

javascriptcssreactjsmaterial-uidatepicker

Tips for customizing column width in v-simple-table with Vuetify.js component

For my most recent projects UI component, I decided to use vuetify.js. I attempted to adjust the width of the th and td elements within a v-simple-table using CSS, but unfortunately, nothing seemed to happen. My goal was to set the width of every th and td ...

cssvue.jsvuetify.js

Tips for maintaining grid width when columns are rearranged in the column menu

Is it possible to stop jqgrid from changing its width to full screen after column selection? I attempted the code below, following guidance from How to change column name in column chooser pop up in jqgrid? My aim was to create a column switcher function ...

jqueryhtmlcssjqgridfree-jqgrid