CSS transition bug inside anchor (Chrome and IE) -
take @ code:
i need wrap box div containing text , svg images link anchor < > :
<a href="#"> <div id="block1"> <svg>...</svg> <div class="text">...</div> </div> </a>
on hover event want smoothly change colors of svg image ( colors of < path > elements )
#block1:hover #path1 { fill: #color; -webkit-transition: 0.8s ease-in-out; ................................. transition: 0.8s ease-in-out; }
it works fine on firefox (haven't tested opera or safari), doesn't work in ie10 , in chrome there seems strange loading bug:
when open jsfiddle page seems work, if edit code , run again (without reloading whole page) block inside anchor flickering (no smooth color transition). if reload whole page again, works again.
on project page anchor blocks flickering on first load. i've tried load project page locally , there no flickering.
can tell me how fix (on chrome @ least)? thank you
edit: found solution make anchor block element absolute instead of wrapping block:
<div id="block1" style="position:relative;> <a href="#" style="position:absolute; display:block; height:200px; width:400px; z-index=1"> </a> <svg>...</svg> <div class="text">...</div> </div>
is acceptable practice ? still doesnt work on ie10 though..
Comments
Post a Comment