Safari fails to render SVG with absolute positioned elements

Question

Created Feb ’21

Replies 1

Boosts 0

Views 3.3k

Participants 1

I have a web page that displays a diagram using an SVG element embedded in the html. When the user interacts with the diagram a popup dialog appears. The popup is a <div> element with position:absolute in its CSS style.

This works perfectly in all browsers except for Safari. In Safari when the absolute positioned div is displayed, the SVG only renders in the part of the page that is higher up the page than the div.

Is there any workaround for this bug?

Boost

Answer 1

bikeman868 OP

Feb ’21

Upon further investigation, my SVG has width and height set to 100%, and fills its container when there are no absolute positioned elements, but as soon as an absolute positioned element is added, the height of my SVG is reduced to the part of the container above the absolute positioned div. This may be a more general problem and not related to SVG.

0