Why Safari is Not Displaying Drop Shadows on SVG Path Elements in CSS

I implemented an SVG triangle using HTML:

path {
  fill: red;
  filter: drop-shadow(5px 3px 17px rgb(0 0 0 / 1));
}
<svg style="height: 36px; width: 100%; background-color: #EAEAEA ;" viewBox="0 0 436 217" preserveAspectRatio="none" class="Tagline-triangle is-red first triangle" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path class="triangle-shadow-downward" d="M0 0H436V217L0 0Z"></path>
</svg>

This setup creates a shadow effect like this: https://i.sstatic.net/5dJdp.png

The subtle shadow along the diagonal of the triangle shows up perfectly on Chrome and Firefox but unfortunately doesn't appear on Safari. Any ideas why this might be happening and how to resolve it?

htmlcsssvgsafari

Answer №1

I'm not a Mac user, but this solution could be worth trying.

path {
  fill: red;
  filter: drop-shadow(5px 3px 17px rgb(0 0 0 / 1));
  -webkit-filter: drop-shadow(5px 3px 17px rgb(0 0 0 / 1));
  -moz-filter:  drop-shadow(5px 3px 17px rgb(0 0 0 / 1));
  -ms-filter:  drop-shadow(5px 3px 17px rgb(0 0 0 / 1));
  -o-filter: drop-shadow(5px 3px 17px rgb(0 0 0 / 1));
}
<svg style="height: 36px; width: 100%; background-color: #EAEAEA ;" viewBox="0 0 436 217" preserveAspectRatio="none" class="Tagline-triangle is-red first triangle" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path class="triangle-shadow-downward" d="M0 0H436V217L0 0Z"></path>
</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

Is there a way to conceal the horizontal divider in the login form of the ionic HTML mobile user interface?

While designing this login form on the HTML ionic mobile UI, everything looks good except for one thing - I want to hide the horizontal line that appears between the "Forgot Password" label and the LOGIN button. Is there a way to do this? Login.html: < ...

androidhtmlangularionic-frameworkmobile

react: implement custom context menu on videojs

Can someone assist me with adding a quality selector and disabling the right-click option in a webpage that uses videojs? I am unsure about using plugins, as there were no examples provided in react. Any guidance would be appreciated. VideoPlayer.js impor ...

javascripthtmlreactjsreact-routervideo.js

Delete a div when a button is clicked through JavaScript

I'm having an issue with a form I created that duplicates itself - I can't seem to get the 'x' button to remove the corresponding div as needed. I have placed both buttons outside of the div like this: <button type="button" id="cro ...

javascriptjqueryhtmlcss

Store information during each iteration

Below is a snippet of my JavaScript code: for (var i in data){ var trans_no = data[i]; var transno = trans_no.transno; var transdate = trans_no.transdate; var dropno = trans_no.drop; var cusname ...

javascriptphphtmlsqlajax

A flashy Rickshawgraph with the ability to modify the background color of the top data series

I am facing a challenge in modifying the background color of the rickshawgraph widget in dashing based on the maximum value of the highest graph from the latest incoming data. While I have successfully implemented this feature for one series, I am struggli ...

csscoffeescriptrickshawdashing

Creating a javascript function to update content on click

Recently, I've been designing a webpage and encountered an issue. I want the text in a specific area to change whenever a user clicks on a link. Below is the code snippet related to the section I want to modify using a JavaScript function. <div id ...

javascriptjqueryhtmlcss

"Implement a feature that allows for infinite scrolling triggered by the height of

Looking for a unique solution to implement a load more or infinite scroll button that adjusts based on the height of a div. Imagine having a div with a height of 500px and content inside totaling 1000px. How can we display only the initial 500px of the div ...

javascriptcss

AInspector WCAG evaluation found that mat-select does not meet level A compliance standards

As I work on making my website WCAG level A compliant, I've encountered an issue with the mat-select component in Angular material. After running checks with the AInspector extension for Firefox, it appears that the mat-select component lacks aria-con ...

htmlangularangular-materialaccessibilitywcag

Angular Appreciation Meter

Looking to create a rating system using Angular. The square should turn green if there are more likes than dislikes, and red vice versa (check out the stackblitz link for reference). Check it out here: View demo I've tried debugging my code with con ...

htmlangulartypescript

Concealing the resize handle icon using CSS

Consider a scenario where there is a table structure: <table> <tr> <th><div>Title1</div></th> <th><div>Title2</div></th> </tr> <tr> <td>< ...

csshtml-tableresizeresponsive

Can someone assist me in creating a clickable link that opens a menu in HTML when clicked?

I have been attempting for the past few days to open the megamenu by clicking on a link, but despite my efforts, I have not been successful. After reviewing some code, I discovered a clue in the CSS. It seems that setting the visibility value to visible wi ...

javascripthtmlcss

Is there a way to include text beneath the navigation bar and other elements on the page?

I am stuck trying to add some text below my header and navigation bar. Here is the code I've been working with: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta htt ...

htmlcsstextheadernav

Display the PrimeFaces dialog in the middle of the screen

I've encountered an issue with positioning dialogs on different pages. I tried using a CSS code to center them on the screen, but it didn't work as expected. .ui-dialog{ position: fixed; top: 50%; left: 50%; margin-top: -50px; ...

cssuser-interfacedialogdatatableprimefaces

Guide on inserting text input value into the href attribute of a hyperlink

Lately, I've been facing an issue that has been troubling me for the past few hours. I have a search input field where users can enter text and click send. The entered text should then be added to the href attribute and sent to the results page for qu ...

javascriptjqueryhtml

Align Horizontal Fixed Element

<html> <head> <style> #rectangle { position: absolute; right: 0; bottom: 0; width: 150px; height: 200px; } </st ...

javascripthtmlcss

What is the most effective method for accurately tallying the number of matches in a Datalist using the Input value as a reference

I have set up a datalist element with an associated input element for autocompletion in modern browsers: HTML code <input type="search" id="search" list="autocomplete" /> <datalist id="autocomplete"> <option value="c++" /> < ...

javascripthtmlautocomplete

Using Selenium to locate and identify content based on HTML attribute names

To confirm the presence of specific HTML content or items on a page using known unique identifiers, I am seeking to utilize Selenium (or a similar framework). While I have the ability to mark HTML tags with an attribute, I sometimes encounter situations w ...

htmlseleniumautomated-testsintegration-testing

Implement various class versions tailored specifically for mobile browsers

While editing a Wordpress theme, I decided to include a content box within Bootstrap's <div class="well">. However, I soon encountered an issue where there was excess space in the content box on desktop view. To address this, I removed the paddi ...

htmlcsswordpresstwitter-bootstrap

Using Webdriverio and Selenium to implement Basic Authentication within Safari

I have been conducting experiments with a cloud computing service provider named LambdaTest for running Selenium and Appium tests while utilizing webdriverio. All of the company's websites utilize Basic Auth, and it seems like this method will remain ...

seleniumsafariappiumbasic-authenticationwebdriver-io

Browser now replacing attribute translate="yes" with translate="translate"

We have encountered an issue with a translation library that is affecting the functionality of our page. <html lang="en" class="notranslate translated-ltr"> <meta name="google" content="notranslate"> As ...

javascripthtmlvue.js