ForeignObject не работает в браузере Safari - PullRequest
Новая
       16

ForeignObject не работает в браузере Safari

1 голос
/ 22 апреля 2019

Я использую d3.js для простой визуализации данных. Он работает в Chrome и Firefox, но не в Safari. ForeignObject показывает странное поведение в браузере Safari Mac. Текст смещен влево (картинка прилагается). Эта проблема была связана с позиционированием двух div. Я удалил положение: абсолютное в # innerDiv и положение: относительное в родительском div. Это решило проблему. Но я не могу расположить текст по центру (что и было целью вышеупомянутого).

В IOS Safari (мобильная версия) он даже ничего не отображает (картинка прилагается)

Что такое визуализация?
Показывает жизненные события ученых. Когда вы наводите курсор мыши на цветной участок сетки, в правом поле отображается соответствующая информация.
Ниже приведена часть кода, которая отображает ForeignObject. 

      /* MAKE COMPLETE MODAL BOX HERE */
      var modalBox = d3.select("#mainSVG")
                     .append("g")
                     .attr("id", "modalBOXgroup")
                     .append("rect")
                     .attr("id", "modalBOX")
                     .attr("x", "600")
                     .attr("y", "45")
                     .attr("rx", "20")
                     .attr("rx", "20")
                     .attr("width", "580")
                     .attr("height", getSVGheight() - 60)
                     .style("fill", singleDayEvents[0].color)
                     .style("stroke", "white")
                     .style("stroke-width", "5px");

      var modalTitle = d3.select("#modalBOXgroup")
                               .append("foreignObject")
                               .attr("x", "620")
                               .attr("y", "70")
                               .attr("width", "540")
                               .attr("height", getSVGheight() - 110)
                               .append("xhtml:div")
                               .style("height", "100%")
                               .style("color", "white")
                               .style("font-family", "sans-serif")
                               .style("position", "relative")
                               .append("xhtml:div")
                               .attr("id", "innerDiv")
                               .style("position", "absolute")
                               .style("top", "50%")
                               .style("width", "100%")
                               .style("transform", "translateY(-50%)")
                               .style("overflow", "auto")
                               .append("h3")
                               .attr("id", "modalTitle")
                               .style("color", "white")
                               .style("text-align", "center")
                               .style("text-decoration", "underline")
                               .text(singleDayEvents[0].title);

      var modalDescription = d3.select("#modalBOXgroup foreignObject #innerDiv")
                               .append("p")
                               .attr("id", "modalDescription")
                               .style("font-size", "14px")
                               .style("text-align", "justify")
                               .style("line-height", "30px")
                               .text(singleDayEvents[0].desc);

      /* MAKE COMPLETE MODAL BOX HERE */

Вы можете посетить эту ссылку, чтобы проверить это: https://conductscience.com/age-when-charles-darwin/

PS Я попытался добавить пространство имен (с атрибутом xmlns) к обоим элементам div в foreignObject. Но это не сработало.

Изображения: Safari Mac Issue Safari IOS Issue

...