javascript - Why does using transform="translate(x, y)" make scrollbar unclickable? -
i've spent way long trying figure out...i have svg g elements , foreign object. issue is, when g element gets translated, scrollbar have within foreign object becomes unclickable. (i using chrome need working on...firefox seems working fine though)
i have example in jsfiddle here.
if remove transform="translate(...)" in first g element, scrollbar becomes clickable...but position bit off. have hover few pixels on top of scrollbar or up/down arrow interact it. idea why transform=translate() messing scrollbar , how go fixing this?
.content { width:100px; height:100px; font-size:1.5em; overflow : auto; background-color:yellow; }
<svg width="1243" height="651"> <g class="graph" transform="translate(200,20)scale(1)"> <g class="output"> <g class="nodes"> <g class="node update" transform="translate(85.5,75.5)" style="opacity: 1; cursor: pointer;"> <g class="label" transform="translate(0,0)"> <g transform="translate(-75.5,-51.5)"> <foreignobject width="151" height="103"> <div class='content'> <p>a lot of text enable overflow blah blah blah</p> </div> </foreignobject> </g> </g> </g> </g> </g> </g> </svg>
Comments
Post a Comment