SVG icons in ::before or ::after content gets distorted on hover

Not reproducible Issue #396762

Details

Created
Jun 26, 2014
Privacy
This issue is public.
Reports
Reported by 0 people

Sign in to watch or report this issue.

Steps to reproduce

URL:

Repro Steps:

==============

http://codepen.io/anon/pen/rmyfb](http://codepen.io/anon/pen/rmyfb)[http://codepen.io/anon/pen/rmyfb](http://codepen.io/anon/pen/rmyfb)

  • zoom the page for more visible results

  • move the mouse in and out of one of the svg icons twice

==> the rendering of the svg moves from fitting its square to overflowing it on the right, and being clipped (after the second iteration)

 

1: Make an element, and insert a SVG graphic before or after it using ::before, :before, ::after or :after.

2: On hover, replace the icon used

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Christian F.”

      Changed Assigned To from “Christian F.” to “Rossen A.”

      Changed Assigned To from “Rossen A.” to “Bogdan B.”

      Changed Status to “Confirmed”

      Changed Assigned To from “Bogdan B.” to “Kevin B.”

      Changed Assigned To from “Kevin B.” to “IE F.”

      Changed Status from “Confirmed” to “Won’t fix”

      Changed Steps to Reproduce

      Changed Assigned To to “Bogdan B.”

      Changed Status from “Won’t fix” to “Confirmed”

      Changed Assigned To from “Bogdan B.” to “Scott L.”

      Changed Status from “Confirmed” to “Not reproducible”

    You need to sign in to your Microsoft account to add a comment.

    Sign in