javascript - Hover styling and transitions not applying properly to appended elements in Firefox -


i have svg i'm using sort of interactive floor plan. when hover on different areas of floor plan (<g> elements), expand , float above other areas. scaling of element triggered css, hovered area appear above other areas use jquery append element bottom of svg.

this works fine in chrome, not in firefox. can help?

the code exceeds character limit question, can't add snippet, but i'm made pen here at.

here important bits of code:

css:

g.hoverfx {      transition: transform 0.3s linear;     transform-origin: 50% 50%;     transform: scale(1);  } g.hoverfx:hover {      filter: url(#shadow);     transform: scale(1.1);  }

js:

jquery(function(){   jquery('g.hoverfx').hover(function(e){     jquery(this).appendto('svg#layer_2');   }); });

html:

<g class="hoverfx" id="conference_1_">     <rect x="342" y="206.5" class="st19" width="330.3" height="218.9"/>     <path class="st4" d="m671,207.8v424h343.3v207.8h671 m673.7,205.1h-333v221.6h333v205.1l673.7,205.1z"/> </g> <g class="hoverfx" id="kitchen_1_">     <rect x="674.3" y="206" class="st48" width="161.7" height="219.3"/>     <path class="st4" d="m834.7,207.4v424h675.6v207.4h834.7 m837.3,204.7h672.9v222h164.4v204.7l837.3,204.7z"/> </g> <g class="hoverfx" id="catering_store_1_">     <rect x="1264.7" y="306.7" class="st20" width="554.7" height="476.3"/>     <path class="st4" d="m1818.4,307.8v474.2h-552.7v307.8h1818.4 m1820.5,305.7h-556.8v784h556.8v305.7l1820.5,305.7z"/> </g> <g class="hoverfx" id="clearance_store_1_">     <rect x="1112.6" y="180.3" class="st21" width="706.8" height="124.4"/>     <path class="st4" d="m1818.5,181.3v122.4h-704.8v181.3h1818.5 m1820.5,179.3h-708.8v126.4h708.8v179.3l1820.5,179.3z"/> </g> <g class="hoverfx" id="showroom_1_">     <polygon class="st22" points="296.8,783 296.8,426.7 537.7,426.7 837.4,426.8 837.3,180.4 1110.6,180.4 1110.6,306.7 1262.6,306.7          1262.6,783  "/>     <path class="st4" d="m1109.6,181.4l0.1,124.3l0,2.1h2.1h149.9v474.2h297.8v427.8h239.9l298.7,0l2.1,0l0-2.1l-0.1-244.3h1109.6          m1111.6,179.3h836.3l0.1,246.4l-298.7,0h295.7v784h967.9v305.7h-152l1111.6,179.3l1111.6,179.3z"/> </g>

i've tried find answers online, useful thing found this previous question, think step in right direction, helps.

the cause described in link posted. moving elements around in dom prevent firefox processing hover events properly.

one solution tie animation class instead of hover event. , remove class on hover.

jquery(function(){    jquery('g.hoverfx').hover(function(e){      jquery(this).addclass("hovering").appendto('svg#layer_2');    },function(e){      jquery(this).removeclass("hovering");    });  });
.st4{fill:#eeeeee;}  .st19{fill:#1b998b;}  .st20{fill:#87bcde;}  .st21{fill:#d7263d;}  .st22{fill:#042e6f;}  .st48{fill:#7f3d82;}              g.hoverfx {    transition: transform 0.3s linear;    transform-origin: 50% 50%;    transform: scale(1);  }  g.hoverfx.hovering {    filter: url(#shadow);    transform: scale(1.1);  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    <div class="interactive-wrapper" style="transform: translate(40%,0%);position:absolute;width: 50vw;">  <svg version="1.1" id="layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  	 viewbox="0 0 2061.2 1110.7" style="enable-background:new 0 0 2061.2 1110.7;width: 50vw;" xml:space="preserve">    <defs>      <filter id="shadow">        <fedropshadow dx="0" dy="0" stddeviation="5"/>      </filter>    </defs>  <g class="hoverfx" id="conference_1_">  	<rect x="342" y="206.5" class="st19" width="330.3" height="218.9"/>  	<path class="st4" d="m671,207.8v424h343.3v207.8h671 m673.7,205.1h-333v221.6h333v205.1l673.7,205.1z"/>  </g>  <g class="hoverfx" id="kitchen_1_">  	<rect x="674.3" y="206" class="st48" width="161.7" height="219.3"/>  	<path class="st4" d="m834.7,207.4v424h675.6v207.4h834.7 m837.3,204.7h672.9v222h164.4v204.7l837.3,204.7z"/>  </g>  <g class="hoverfx" id="catering_store_1_">  	<rect x="1264.7" y="306.7" class="st20" width="554.7" height="476.3"/>  	<path class="st4" d="m1818.4,307.8v474.2h-552.7v307.8h1818.4 m1820.5,305.7h-556.8v784h556.8v305.7l1820.5,305.7z"/>  </g>  <g class="hoverfx" id="clearance_store_1_">  	<rect x="1112.6" y="180.3" class="st21" width="706.8" height="124.4"/>  	<path class="st4" d="m1818.5,181.3v122.4h-704.8v181.3h1818.5 m1820.5,179.3h-708.8v126.4h708.8v179.3l1820.5,179.3z"/>  </g>  <g class="hoverfx" id="showroom_1_">  	<polygon class="st22" points="296.8,783 296.8,426.7 537.7,426.7 837.4,426.8 837.3,180.4 1110.6,180.4 1110.6,306.7 1262.6,306.7   		1262.6,783 	"/>  	<path class="st4" d="m1109.6,181.4l0.1,124.3l0,2.1h2.1h149.9v474.2h297.8v427.8h239.9l298.7,0l2.1,0l0-2.1l-0.1-244.3h1109.6  		 m1111.6,179.3h836.3l0.1,246.4l-298.7,0h295.7v784h967.9v305.7h-152l1111.6,179.3l1111.6,179.3z"/>  </g>    </svg>  </div>


Comments

Post a Comment

Popular posts from this blog

PHP and MySQL WP -

i trying accomplish 2 things here code. writing php directly wp page using insert php plugin. 1) query mysql database , return results 1 column 4 columns. 2) make each result own hyperlink directs user new wp page runs new query on page. i able query show results , turn results dynamic hyperlink, cannot formatting down. right returns result 1 column. here have: [insert_php] $servername = "localhost"; $username = "login"; //edited privacy $password = "password"; //edited privacy $database = "database"; //edited privacy // create connection $conn = new mysqli($servername, $username, $password, $database); // check connection if ($conn->connect_error) { die("connection failed: " . $conn->connect_error); } echo "connected successfully"; //get results database $result = mysqli_query($conn,"select mine mines order mine"); $all_property = array(); //declare array saving property //showing proper...
Read more

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m...
Read more

go - golang pprof for c library code -

i have been trying profile golang application pprof, seems details of c code(linked static library) missed in output result. flame graph from frame graph can see c code time consuming reported within "runtime._externalcode", no details @ all. , sure static library compiled debug enable. so there way make pprof details(like stack trace) of 3rd party c code? or there other golang profiling tool this?
Read more