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

Popular posts from this blog

python - Healpy: From Data to Healpix map -

c - Bitwise operation with (signed) enum value -

xslt - Unnest parent nodes by child node -