cuộn không hoạt động bên trong svg đối tượng nước ngoài trong chrome

Question

Tôi đã div bên trong svg đối tượng nước ngoài, với overflow: auto

• cuộn chỉ làm việc với các bánh xe chuột, không thể kéo thanh
• nó hoạt động trên firefox, nhưng không phải trên chrome/Safari
• nó hoạt động nếu không có thay đổi về yếu tố svg-g

thấy fiddle: http://jsfiddle.net/ranr/ncry8Lmx/

Đây có phải là lỗi trong chrome không? bất kỳ cách nào xung quanh nó?

<svg width="1000" height="800"> 
    <g transform="translate(100,50)"> 
    <rect x="4" y="4" width="110" height="90" stroke="#666666" fill="#eeeeee" /> 
    <foreignObject x="10" y="10" width="100" height="80"> 
     <div xmlns="http://www.w3.org/1999/xhtml" style="height:100%;overflow:auto;"> 
     <div>aaaaaa</div> 
     <div>bbbbbb</div> 
     <div>cccccc</div> 
     <div>dddddd</div> 
     <div>eeeeee</div> 
     <div>ffffff</div> 
     </div> 
    </foreignObject> 
    <g> 
</svg> 

Answer 1

Tôi nghĩ đó là lỗi của Chrome/Safari. Nếu bạn cố gắng thay đổi overflow:auto thành overflow:scroll, div đã hiển thị ra khỏi foreignObject.

Answer 2

Lỗi crôm đó đã bị đóng, thật không may, có vẻ tệ hơn. Nếu bạn mở jsfiddle, nội dung div đó là vô hình, ngoại trừ bạn xóa kiểu overflow:auto. Tôi đã thử nghiệm, nó vẫn vô hình nếu overflow-y:scroll. Thử nghiệm trong Chrome v62. Firefox 57 hoạt động tốt.