Safari not supporting SVG with pointer events

When working with SVG elements (shapes), I often encounter situations where mouse clicks need to pass through transparent areas or where there is no actual shape present.

To address this issue, I have utilized the css property pointer-events:none on the root SVG tag. This solution works well in most browsers, including IE and Mozilla.

Unfortunately, Safari does not seem to respond to this css property. You can test this by checking out the following fiddle:

'http://jsfiddle.net/AkashSaikia/52aWw/2/'

Does anyone have any insights on this issue? Is there a workaround that can be implemented?

csssvg

Answer №1

I have created a demo that is compatible with all web browsers and even works on Safari for iPad.

Check out this webpage

In the JavaScript code, specifically at line 121, you will find:

cloned_explosion_sprite.style.pointerEvents = 'none';

This particular line disables mouse/touch events for the explosion sprite so it does not interfere with other elements when added to the DOM.

Feel free to reach out if you have any questions!

Answer №2

Just wanted to inform you that I've made some updates to the fiddle by adding a rect element in SVG. Please double-check to see if everything is working as expected.

<rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.3; " fill="none" stroke="#ffff00" height="20" width="80"  stroke-width="10" x=2 y=2 opacity="0.3"></rect>

I did encounter an issue with Safari and SVG elements. Even though it claims to support them, there are limitations on the extensions and tags it can fully handle.

If needed, feel free to experiment with changing the DocType:

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>

Please let me know your thoughts once you've had a chance to review the changes.

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

Align the items in the center of a Bootstrap navigation bar

I am looking to center the navigation menu items on my navbar. Currently, my navbar layout appears like this: https://i.sstatic.net/BqRwW.png Specifically, I want "Users", "Admin", and "Records" to be centered within the navbar. Additionally, I would lik ...

cssbootstrap-4flexbox

HTML & CSS: Modify background rectangle behind text to limit its size within the webpage dimensions

I'm experiencing a unique issue with the current code present in my HTML index file. <div class="titleMessage"> <div class="heading"> <p class="main">NAME HERE</p> <p class="sub">Software Engineer& ...

htmlcsstextbackgroundelement

Can using display: none impact the SEO of a website's navigation menu?

Is there a difference in SEO impact between using display:none with CSS and using display:none with jQuery for menus? Appreciate the insights! ...

jquerycssseomenu

Switch the background image of one div when hovering over a different div

Can anyone assist me with creating an interactive map where continents light up as you hover over them? I am using multiple images within div elements in order to achieve this effect. Specifically, I want to change the background image of one div when hove ...

htmlcss

Toggle the menu using jQuery on unordered list items

Below is the HTML code I am using : <ul class="main-block"> <li class="firstLevel"> <a href="#category">EXAMPLE CATEGORY 1</a> <ul class="dijete"> <li class="child"> <a href="some-sub-categ ...

javascriptjqueryhtmlcss

What is the best way to conceal a broken image icon without sacrificing all of the stylesheet?

Can someone assist me in understanding and modifying this code? Here is the code snippet: <table> <tr> <td> <img src="" id="img" class="img" style="width:100%;height:200px;background-color:#ccc;border:2p ...

jqueryhtmlcssajaxlaravel

Unforeseen Issues Arising from Media Queries

Trying out some new styling for different screen sizes based on the bootstrap grid system dimensions. Facing an issue where only certain styles apply while others don't seem to take effect. Here's a snippet of the CSS: @media only screen and ( ...

htmlcsstwitter-bootstrap

Alter the color of the " / " breadcrumb bar

Is there a way to change the color of the slash " / " in breadcrumb trails? I have tried adding CSS styles, but it doesn't seem to work. <ol class="breadcrumb" style="font-size: 20px;"> <li class="breadcrumb-item&q ...

htmlcssbootstrap-5

Adjusting the size based on the screen width of various devices

I'm currently working on a website that is not responsive, and I know I can make it responsive using media queries. However, this will be a significant task... I'm looking for a quicker solution to simply zoom or scale my website to match the dev ...

jqueryhtmlcss

Angular implementation of a dynamic vertical full page slider similar to the one seen on www.tumblr

I'm determined to add a full-page slider to the homepage of my Angular 1.x app After testing multiple libraries, I haven't had much luck. The instructions seem incomplete and there are some bugs present. These are the libraries I've experi ...

javascripthtmlcssangularjsfullpage.js

Enhancing the appearance of specific text in React/Next.js using custom styling

I have a table and I am currently working on implementing a search functionality that searches for an element and highlights the search terms as they are entered into the search bar. The search function is functional, but I am having trouble with the highl ...

javascriptcssarraysreactjsnext.js

The combination of two equal height elements with absolutely positioned child elements

I have a website that features a side-bar navigation and a main content pane, both enclosed within a container element. The content has its own unique background styling, while the menu adopts the background of the parent container. In situations where th ...

htmlcsscss-position

Issue: Node.js Express unable to access static files when the route is nested more than one folder level deep.Resolution

Before we delve into the question, let me share with you the folder structure of my node.js express app: /home server.js index.html /app /routes public.js /public /css main.css In my server.js file, ...

javascriptcssnode.jsexpress

Tips for resizing a chartjs within bootstrap columns to accommodate various web browsers

I am using chartjs charts within bootstrap rows and columns. The number of columns per row can be dynamically changed. For example, I could rebuild my rows with the following markup: const twoColumn = spacerColumn + "<div class=&ap ...

cssbrowserchart.jsresize

The <h1> element is not responding to the style attribute

Exploring HTML as a beginner has led me to an interesting issue. I've been practicing my newfound skills on W3Schools' platform and everything was running smoothly until I encountered a discrepancy in how the code is rendered on Wordpress. The s ...

htmlcss

Is Fullpage.js functioning only on local servers?

I have decided to create a personal website showcasing my portfolio using the fullpage.js library. Everything seems to be working fine during development, but once I upload the site to my github.io or another public domain via FTP, I encounter GET errors t ...

javascriptjqueryhtmlcssfullpage.js

Having difficulty in closing Sticky Notes with JavaScript

Sticky Notes My fiddle code showcases a functionality where clicking on a comment will make a sticky note appear. However, there seems to be an issue with the Close Button click event not being fired when clicked on the right-hand side of the note. I have ...

javascriptjqueryhtmlcssckeditor

What is the method for achieving the equivalent effect of "background-size: cover" on an <img>?

I am looking to ensure that an <img> has the smallest possible size without any empty spaces inside a div, while also being perfectly centered both horizontally and vertically. The image size may vary. To better illustrate, here is an example: http: ...

javascriptjqueryhtmlcss

Spread out elements equally into columns

I am facing a challenge with arranging items within a single div called .wrap. The goal is to place an unknown number of items (.thing) into four columns, stacked on top of each other. <div class="wrap"> <div class="thing"> thing1 </div ...

htmlcssmultiple-columns

How come the last word in CSS nested flexbox wraps even though there is space available?

I am facing an issue with a nested flex container setup. Below is the code snippet: <div class="parent-container"> <div class="child-container"> <span class="color-block"></span> <span>T ...

htmlcssflexbox