When the filter feGaussianBlur is applied to an SVG circle, it disappears on Safari but not on Chrome

While implementing the filter with feGaussianBlur to an SVG circle, I encountered a peculiar issue. It works perfectly on Chrome, but unfortunately, the circle disappears when viewed on Safari.

https://i.sstatic.net/k916B.png

https://i.sstatic.net/5Bfp9.png

     <filter
        id="soft"
        filterRes="1200"
        colorInterpolationFilters="sRGB"
        x="-50%"
        y="-50%"
        width="200%"
        height="200%"
     >
        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
   {circles.map(circle => {
      return (
        <circle
          r={baseBubbleR}
          style={{
          filter: skillType === 'soft' ? 'url(#soft)' : '',
          fill: circleColor
        />
       )
     })

I experimented with various solutions such as expanding the region, but the issue persists on Safari. Any suggestions or help would be greatly appreciated.

htmlcssreactjssvg

Answer №1

After successfully resolving this issue, it became clear to me that the problem was not related to SVG specifically.

I found that I needed to create a separate filter for each circle when dealing with Safari, while a global filter sufficed for other browsers.

{circles.map((circle, index) => {
  return (
    <div key={`circle-${index}`}>
      <filter
        id={`circle-${index}`}
        filterRes="1200"
        colorInterpolationFilters="sRGB"
        x="-50%"
        y="-50%"
        width="200%"
        height="200%"
      >
        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
      </filter>
      <circle
        r={baseBubbleR}
        style={{
        filter: skillType === 'soft' ? 'url(#soft)' : '',
        fill: circleColor
      />
     </div>
   )
 })

The above code serves as an illustration.

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

Tips for implementing input validation and dynamically enabling/disabling the submit button based on the form's state in ReactJS

I'm currently working with npm Validator to validate input information and dynamically change the state of the submit address button based on the validation. The issue I'm facing is that although I can see the entered text in the console, it does ...

reactjsreactstrap

Struggling to make css selector acknowledge the margins on the right and left

I am trying to style two inner divs within a containing div by floating the first one to the left and the second one to the right. Additionally, I want to add a margin of 15px on the left for the first div and on the right for the second div. The challenge ...

htmlcss

Tips for emphasizing matches within a string using JSX

I've implemented a custom autocomplete feature that suggests options based on user input. I want to highlight the characters in the suggestions list that match the input value. For example, if the suggestion list includes "alligator", "lima", and "li ...

javascriptreactjs

A guide on dynamically altering text upon hovering over an element using Vue.js

On my website, I have the following HTML code: <div class="greetings"> <img @mouseover="hover='A'" @mouseleave="hover=''" src="a.png" alt="A" /> <img @mouseover="hover='B'" @mouseleave="hover=''" ...

javascripthtmlvue.js

Develop a personalized Hook for form submission in React

I find myself repeating the same process multiple times in my project every time I submit a form. This involves displaying a loader, removing it, and then displaying errors or success messages. Is there a way to create a customized hook to streamline this ...

reactjsformsapireact-hooks

Transform website code into email-friendly HTML code

Is there any software available that can convert web HTML and CSS files to email HTML with inline CSS? This would allow the email to be viewable on various email clients such as Outlook, Thunderbird, Gmail, Yahoo, Hotmail, etc. I want to write my code lik ...

htmlcssxhtmlnewsletter

React Redux: Issue with useEffect triggering multiple times

Trying to implement a click event listener for a div based on its class name. Below is the code snippet: useEffect(() => { const element = document.querySelectorAll('some-class'); element[0].addEventListener('click',(e)=>{ If(isTr ...

reactjsreact-reduxreact-hooks

Unable to locate Apollo headers during parsing in a Node.js environment

In my React.js web app, I have configured a header that does not appear when I log req.headers in my Node.js API. The value of headerData.data is initialized in a separate file and is not null. export const headerData = { data: null }; const httpLink ...

reactjsnode.jsapollo

Essential symbol needed for labeling the user interface element

My HTML includes a dynamic label component where the 'required' value is determined by an API response that can be either true or false. Is it feasible to assign the property ojComponent{ required: true } for this label? *Date From ---- To --- ...

htmlknockout.jsjetoracle-jet

What is the best way to retrieve the values of "qty" and "price" and access them within the item [array] without knowing the IDs?

I am currently working on a shopping cart project, specifically on the "previous orders" page to display order details. My goal is to output this information in an (.ejs) file. The data structure includes nested objects, and within one object, propertie ...

javascripthtmljquerynode.jsejs

Ways to move an element beyond specified padding using CSS

In this image below, I have added a 10px padding to the container as it is usually needed. However, for the headings (blue) I do not want any padding. Is there a way to make the heading extend over the padding? https://i.sstatic.net/DeSHZ.jpg I prefer no ...

htmlcss

Two flexible-sized containers placed side by side, with an ellipsis displayed on the left container

Can you achieve a layout where two elements are inside a container and float side-by-side? The right element should adjust its size based on the content while the left element fills the remaining space in the container with an ellipsis to truncate overflow ...

htmlcssdynamicellipsis

Preventing click events with pointer-events property in CSS while still allowing scrolling

Is there a way to use pointer-events: none to disable click events on a specific container while still allowing scroll functionality and an overlay? You can view my fiddle here: https://jsfiddle.net/1eu6d3sq/1/ Currently, when I apply pointer-events: non ...

javascripthtmlcss

Exploring the realm of styling with React JS

Currently, I am facing an issue while working with material-ui for my web design. Here is the code snippet that I am using: const useStyles = makeStyles((theme) => ({ card: { marginTop: theme.spacing(10), direction:"column", alig ...

javascriptreactjsmaterial-ui

Exploring unique forms with the turfjs polygon difference() function

While implementing the difference() function for my polygon map, I encountered a problem where unexpected shapes would appear or disappear when zooming in on the map. These shapes should not be there. The polygons involved are of type MultyPolygon and Poly ...

javascriptreactjsmapspolygonturfjs

Experiencing difficulties when testing a React Material UI form using React unit tests for beginners

I've encountered an issue with a simple form consisting of a single text field. The form utilizes the React Material UI library and Formik for validations and verification. Unfortunately, I'm facing difficulties in accessing the textfield within ...

reactjsjestjsmaterial-uienzymeformik

Impact on adjacent div

Within my code, I have two sibling divs that contain additional nested divs as shown below: <div class="btn_lists"> <div class="btn green_btn"> <img src="<?= asset_url() ?>images/escolar_07__1.png" /> </div> & ...

htmlcss

Avoid having the java applet destroyed when the container is hidden

I am working with multiple DIVs, each containing text, a java applet (unfortunately...) and buttons. I am currently creating a search function to dynamically show and hide these DIVs. However, whenever I use display:none on a DIV, the applet inside it se ...

javajavascripthtmlcssapplet

Styling Columns with Borders and Gutters in Bootstrap

My goal is to create 4 divs, each with a width of 3 columns and a 3px border. I have successfully added the columns with borders, but I can't seem to get the border-box property to work as intended. I believe that I need the border to be an inner bord ...

csstwitter-bootstrapgridborder

Tips for eliminating the active icon background in React Navigation Material Bottom Tab Navigator

Struggling with styling in React Navigation Material Bottom Tabs Navigator. The active tab's background is not customizable (highlighted in the image below). Tab Issue Need assistance with my code: <Tab.Navigator initialRouteName="Home&q ...

reactjsreact-nativematerial-uireact-navigation