CSS - Safari has trouble properly implementing clip-path

I'm currently working on a shape-based menu, but I'm encountering issues specifically in Safari. The layout gets distorted in Safari, and I'm struggling to understand the cause. Interestingly, when I use CSS clip-path without the SVG tag, it works perfectly in Safari and Chrome but not in Firefox.

Here's the CSS:

   .menu {
  width: 65%;
  height: 40px;
  background-color: red;
  -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  -webkit-clip-path: url("#clipping");
  clip-path: url("#clipping");
  position: absolute;
  right: 0px;
  bottom: 0;
}

.menu:before {
  content: '';
  width: 99.8%;
  height: 40px;
  -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  -webkit-clip-path: url("#clipping");
  clip-path: url("#clipping");
  background: black;
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
}

And here's the HTML:

<div class="menu">
 <svg width='0' height='0'>
  <defs>
    <clipPath id="clipping" clipPathUnits="objectBoundingBox">
     <polygon points="0.05 0, 1 0, 1 1, 0 1, 0 1" />
    </clipPath>
  </defs>
 </svg>
</div>

Any insights or suggestions would be greatly appreciated. Thank you!

Answer №1

Safari (Webkit) and most versions of IE and Edge do not support the clip-path CSS property.

Answer №2

It's actually functional on Safari for me.

 <svg viewBox="0 0 250 250">
  <polygon points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2" />
  <polygon points="125,30 125,52.2 125,52.1 125,153.4 125,153.4 125,230 125,230 203.9,186.3 218.1,63.2 125,30" />
  <path d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1
      L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/>
</svg>

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 the <noscript> tag for an individual element or a comparable alternative

So, I have a link labeled "Impressum" that when clicked, opens up the Impressum section. <a data-open="something">Impressum</a> <div class="reveal" id="something" data-reveal> <img src="images/reverseLogo.png"> <h1>Imp ...

Display the information in the second dropdown menu once the selection has been made in the first dropdown menu

I've successfully implemented a feature where selecting an option from the first drop-down list populates the second drop-down list accordingly. The HTML code snippet is as follows: <select size="1" id="BodyPart" title="" name="BodyPart"> ...

React-select: issue with maintaining selected option on input

Hello everyone, I am new to React and seeking some assistance in reviewing my code. I have a component called Bucket that contains multiple challenges as separate components. Here is a simplified version of the code: class CLL_Bucket extends Component { ...

Is there a way to specifically style the element I am hovering over with Tailwind Typography and prose?

Currently, I am customizing my markdown pages with Tailwind typography and prose. I am facing an issue where the hover effect is being applied to all images at once instead of just the one being hovered over. Any ideas on how to fix this? Here is a snippe ...

Focusing on a particular iframe

I am currently using the "Music" theme from Organic Theme on my WordPress site and have inserted this code to prevent SoundCloud and MixCloud oEmbeds from stretching the page width: iframe, embed { height: 100%; width: 100%; } Although the fitvid ...

I am finding that the text I am creating using context.fillText keeps getting distorted within the canvas

I am attempting to place text inside a canvas element. The HTML markup for the canvas is as follows: <canvas id="leaderboard2" style="position: fixed; right: 1250px; top: 140px; width: 230px; height: 330px;"></canvas>. Des ...

Highchart displays text centrally on legend hover

I am struggling with the code provided here. My goal is to make text appear in the center of the donut chart when hovering over the legend. Similar to how it works when hovering over a single piece of the donut chart. var chart = new Highcharts.Chart ...

Using the ng-class directive to dynamically set classes based on the value returned from

I am facing an issue with setting the icon style based on a value returned from the controller. The console log confirms that the value is triggered correctly, but it appears that there is a problem with the Ng-class expression. Any assistance on this matt ...

Guide on attaching an onclick event to a button created with a string in Next.js?

<div onClick={(event) => this.addToCart(event)}> <ReactMarkdownWithHtml children={this.props.customButton} allowDangerousHtml /> </div> In my current situation, I am facing an issue with the code above. The button is being rendered ...

The sidebar I designed didn't completely extend across the column in Bootstrap

My sidebar in Bootstrap didn't fill the entire column because I forgot to set a specific width for it. Here is the CSS code for my sidebar: .sidebar { position: fixed; /* top: 0; bottom: 0; left: ...

Aligning UL LI elements vertically for multi-line textORHow to vertically

I am dealing with a ul list that contains both single and multi-line li text. The issue is that the second line of the multi-line text starts at a different indentation than the first line. I need a simple solution to resolve this problem that works seaml ...

Discovering the dimensions of a disabled attribute within a table using XPath in Selenium with Java

I'm attempting to determine the number of columns in a specific table, but some are disabled - I'd like to know if it's possible to get the count without including the disabled ones (only counting the visible columns). As you can see in the ...

Increased pixels being incorporated into my line spacing

Looking for a solution: A <div> containing only one word at a font size of 16px with a line-height set to 1. Encountering issues with extra space above the text in Chrome and Firefox, while the text bleeds slightly out of the bottom. IE exacerbates t ...

Is it possible to automatically select a file and upload it to a specific server? If so, how can this

Hey there! I'm looking for a code snippet that allows me to automatically select a file and upload it to a specific link. Any ideas on how to accomplish this task? Here is the HTML code: <html> <head><title>Uploading</title>& ...

Guide to creating a toggle button

Can someone help me create a button that toggles between displaying block and display none when clicked? I've been trying to use Classlist.toggle with JavaScript, but I'm not sure if I have the correct classes targeted. let showCart = documen ...

Sorting table data by Table SubHeadings using Jquery

Utilizing jQuery tablesorter in my UI, I encountered a challenge with a table that has 2 rows of headers - one main header and one subheader. My goal is to enable sorting on the subheader. How can I achieve this? Below is an example of my code structure: ...

Having trouble with the click button flip function? It seems to be working in one section but not in

Currently, I am facing an issue with a card section that contains two buttons and a description. The first button adds an image which is working perfectly fine, as well as the description section. On the other hand, the second button adds a video and when ...

The CSS isn't functioning correctly in the HTML file as it is in the CSS file

When I added this code directly to my html file, it worked perfectly: <style type="text/css" media="screen"> #headerimg { display: block; background-image: url('/Content/images/epp/ebweblogo1.gif'); background- ...

Notify when the button value changes to "submit"

I recently added a jQuery form wizard to my website. I want users to receive an alert in JavaScript when they reach the end of the form. To achieve this, I inserted a simple JavaScript code at the beginning of my page within <head>..some code</hea ...

Is the GET method failing to record your request?

On one of my pages, I have the following code: <form method="get" action="client_specific_task.php"> <input type="hidden" value="x" /> <input type="submit" value="Add Client-Specific Task"> </form> The client_specific_task.php fil ...