The pseudo class before is experiencing issues with background color in Safari and not functioning as

Issue with Pseudo class before not displaying background colour in Safari browser

To view the code, please visit the following link here

HTML

<div id='test'>
  <p>Test </p>
</div>

CSS

#test {
  position: relative;
  perspective: 240px;
  width: 500px;  
}

#test p {
    position: relative;
}

#test::before {
    content: '';
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: 0;
    right: 0;
    line-height: 27px;
    border: 1px solid #D4E7D1;
    background: #E4F7E1;
    border-radius: 5px 5px 0 0;
    transform: rotateX(45deg); 
}

[Displays correctly in Chrome][1] [1]: https://i.sstatic.net/iEfy0.png [Does not display correctly in Safari][2] [2]: https://i.sstatic.net/rFsBP.png

csssafaricross-browserpseudo-class

Answer №1

It appears that Safari is interpreting the rotation as a 3D effect, causing half of the background to extend towards the viewer and cover part of the text below.

The discrepancy in how 2D and 3D transformations are handled by different browsers is unclear.

A potential solution could involve adjusting the pseudo element's rotation point to the bottom with a reduced angle.

#test {
  position: relative;
  perspective: 240px;
  width: 500px;
}

#test p {
  position: relative;
}

#test::before {
  content: '';
  position: absolute;
  top: -10px;
  bottom: -5px;
  left: -10px;
  right: 0;
  line-height: 27px;
  border: 1px solid #D4E7D1;
  background: #E4F7E1;
  border-radius: 5px 5px 0 0;
  transform: rotateX(22deg);
  transform-origin: center bottom;
}
<div id='test'>
  <p>Test </p>
</div>

To achieve the desired slope, you may need to experiment with both the positioning and the angle adjustments.

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

Variable width items inside an overflow-x container

I'm searching for a solution to create a vertical navigation list that can accommodate elements wider than the container itself. Since users have the freedom to input any names for the items, I cannot predict their width, except maybe by setting a ver ...

htmlcss

What is the best way to create a 3x3 grid layout with 9 input text boxes that do not have a double border thickness?

I am having trouble creating an input square with 3 rows and 3 columns. The borders between each two input boxes are overlapping, resulting in a double thickness border. To see this issue in action, you can run the provided html. How can I fix this so that ...

htmlcssborder

What is the best way to fill in the jquery treeselect widget?

I'm struggling with populating the jquery treeselect widget using a json file or any other method. Since I am new to jquery/javascript, I'm sure I must be missing some basics. Although I have obtained the plugin from https://github.com/travist/j ...

javascriptjqueryhtmlcssjson

if jade is being inconsistent

I am currently using expressjs in my app and have the following setup: app.get('/profile',index.profile); app.get('/',index.home); Within layout.jade, I have the following code: ... if typeof(username)!=='undefined' ...

cssexpresspug

What is the best method for accessing a local html file using Selenium Safari WebDriver on macOS?

I attempted: safariDriver.get("file:///Users/pathToMyHtml/index.html"); safariDriver.get("/Users/pathToMyHtml/index.html"); Unfortunately, neither of these methods were successful. I am using Java on a macOS Sierra system. (Interestingly, if the page is ...

seleniumselenium-webdriversafariwebdriversafaridriver

Attempting to align a banner image in the middle using CSS styling

I'm having some trouble getting the banner image to be centered on all screen sizes. It looks good on smaller screens, but on larger ones it seems to be shifting to the left. Here's what I've attempted so far: .banner { padding-top: ...

css

Click to position custom text on image

Is there a way to adjust the position of text on an image after it has been clicked? I have included an image below to demonstrate how I would like it to appear: https://i.stack.imgur.com/unmoD.png function revealContent(obj) { var hiddenText = obj. ...

htmlcssimageonclickclick

Tips for creating a responsive container for mobile and smaller devices using Bootstrap 3

Apologies in advance for the lengthy post, but I welcome any suggestions and ideas. Thank you! I'm facing an issue with my layout breaking when the screen size is below 1200px (images and text drop down). I don't mind if they stack vertically on ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Need to swiftly modify values of css attributes?

Here is a snippet of the code I am working with: <div></div> <button> Go </button> div { width: 50px; height: 50px; border: 1px solid #ccc; } var bgs = ['red', 'blue', 'yellow', 'green&apo ...

javascriptjquerycss

My presentations are not functioning as expected, could there be a problem with my HTML, CSS, or JavaScript coding?

My website utilizes a Slideshow feature to display images for blog posts. Recently, I attempted to include multiple slideshows within an article, which unfortunately caused all of the slideshows to malfunction. As it stands now, when the code is executed, ...

javascripthtmljquerycss

The sequence of HTML5 DragDrop Enter and Leave events occur consecutively

I am encountering a problem with a simple drag & drop effect where the class name is changed when the drag enters or leaves, resulting in continuous entering and leaving. Take a look at this basic HTML code: <div class="box"> <div cla ...

javascripthtmlcssdrag-and-dropdraggable

Is it possible to make nested HTML list items align to the left?

Is it possible to align nested HTML list items to the left? For example: Bat Cat Ratonetwothree Mat <ul> <li>Bat</li> <li>Cat</li> <li>Rat<ul><li>one</li><li>two< ...

javascriptjqueryhtmlcss

SVG Opacity Transitions seem to ignore the constraints of CSS rules and bounce chaotically beyond their designated boundaries

I'm currently working on implementing a hover effect for an SVG rect embedded in HTML. The transition I've set up is not smooth, and the opacity values seem to be inconsistent during the animation. My browser of choice is Firefox. The rect I&apo ...

htmlcsssvgcss-transitions

Troubleshooting: Browser fails to update after CSSStyleRule modification using JavaScript

When making changes to CSS properties of elements using JS methods like CSSStyleSheet, insertRule, deleteRule, or CSSStyleRule.style.setProperty(), I noticed that the underlying CSS is updated but the page does not reflect these changes immediately. The c ...

javascriptcssgoogle-chrome

Code snippets to reduce excess white space on a website using HTML and CSS

On my website, there are multiple tabs, each containing content from an HTML file. When a user clicks on Tab1, boxes with images are displayed. The layout can be seen in the following Code Demo: Code Demo here There seems to be extra space before and afte ...

javascripthtmlcss

Enhancing User Interaction with Bootstrap Input Forms

Struggling with a CSS and Bootstrap issue, I am unable to find a solution. The problem I am facing is that the content in a div form is not responsive within its parent div. It always extends beyond the parent div and does not adjust its size when the scre ...

cssbootstrap-5

When using Vue with CSS3, placing an absolute positioned element within a relative wrapper can cause issues with maintaining the

Just starting out with Vue and diving into the world of CSS3! I'm currently working on a component that you can check out here: https://codesandbox.io/s/yjp674ppxj In essence, I have a ul element with relative positioning, followed by a series of di ...

javascriptcssvue.jsvuejs2vue-component

I am unable to make any changes to the CSS in the WordPress code that is already integrated

I have created a static web page to serve as my primary homepage. The page is built using HTML and CSS, with some PHP code pulled from My WordPress integrated into it. One of the functionalities I've added is to display the three most recent posts on ...

htmlcsswordpress

Tips on overriding the outline:none property in CSS

Is there a way to overwrite the 'outline: none' property in CSS? I have a parent class that has this property set, but I want to remove it in the child class. ...

htmlcss

Checkbox inputs with activated labels causing double events to fire

Creating round checkboxes with tick marks dynamically and appending them to id="demo" on the click of two buttons that invoke the get(data) method is my current goal. The issue arises when both buttons are clicked simultaneously, as the checkboxes do not ...

javascriptjqueryhtmlcss