CODEWITHSUNDEEP
htmlcssinternet-explorersvginternet-explorer-11
Arya
Arya

Reputation: 1469

SVG inside link not clickable in IE11 when pointer-events set to None

I have an HTML/CSS file similar to this.

.window{
  position: absolute;
  width: 150px;
  height: 100px;
  background-color: #424242
}
svg{
  pointer-events: none;
}

.b{
  height: 40px;
  width: 40px;
  position: absolute;
  bottom: 8px;
  right: 8px;
}
<div class="window">
  <div class="b">
    <a href="https://www.google.com" target="_blank">
      <svg height='100%' width='100%'>
        <rect width='100%' height='100%' style='fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)'></rect>
      </svg>
    </a>
	</div>
</div>

On Chrome, I am able to click the blue SVG with the link, but on IE11, I am not. Does anyone know why this is the case, and what I can do to fix it on IE, without impacting other browsers? The SVG rule is for some other SVGs, so it would be nice to not have to change it.

Thank you!

Upvotes: 3

Views: 3202

Answers (2)

muecas
muecas

Reputation: 4335

The problem is not the SVG itself or the pointer-events. The problem is the a tag, and how IE 11 renders the tag when it contain block elements inside.

The solution i tested is to style the a tag to fill its container:

a {
    overflow: hidden;
    display: block;
    width: 100%;
    height: 100%;
}

I encountered this problem before, with SVG's as images, in older versions of Internet Explorer.

Hope it helps!

.window{
  position: absolute;
  width: 150px;
  height: 100px;
  background-color: #424242
}
svg{
  pointer-events: none;
}

.b{
  height: 40px;
  width: 40px;
  position: absolute;
  bottom: 8px;
  right: 8px;
}

a {
    overflow: hidden;
    display: block;
    width: 100%;
    height: 100%;
}
<div class="window">
  <div class="b">
    <a href="https://www.google.com" target="_blank">
      <svg height='100%' width='100%'>
        <rect width='100%' height='100%' style='fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)'></rect>
      </svg>
    </a>
  </div>
</div>

EDIT: I will write this trying to explain my experience about it. Old browsers, including old versions of Firefox, Chrome and Internet Explorer, did not suppoted to nest block elements inside inline elements. So if you tried to nest a div element inside an link, it will cause that the user won't be able to click on the link and some other strange behaviors. New browsers support some of those techniques (for example, a link with some div layout inside so all the block is clickable). IE11 is on the fence. Also i encontered some issues with SVGs and IE11, even using the SVG as an image (thru an img tag and an external SVG file).

The main problem is that some css attributes can not being setted in onlder browsers, like witdh, height and vertical padding (padding top and bottom). So if you nest a block element inside an inline element, and the element overflows the inline element dimensions (inherited by font size, line height and vertical align of the element), the inline element will not be rendered properrly.

Hope this little edit help you understand the problem.

Upvotes: 4

Devin Fields
Devin Fields

Reputation: 2544

I can't currently test this myself, but give this a try:

svg{
  pointer-events: none
}
svg>rect{
  position: relative;
  pointer-events: auto;
}

I am referencing this: https://css-tricks.com/almanac/properties/p/pointer-events/#comment-1108851

I edited my answer. To be honest, I'm not exactly sure why you wish to do this. What use does disabling the pointer-events on the svg provide if you wish to click it?

Upvotes: 2

Related Questions