Add comments on Safari's SVG rendering bug I tried to apply workaround. It surely fixed position problem; however, it completely ruined the rendering of non-overflowing elements. Safari is the new IE, yes. If I could solve scroll (layout) problem on the canvas rendering, I'll switch to SVG + HTML approach. It's ridiculous to abandon the most correct and semantic document due to one problematic broken browser, but this is what we got. Cult made of normies and fanboys encouraging unhealthy and uncompetetive web. At least Chrome does not have this lot of rendering/compositing bugs.

Changes

1 changed files (+38/-16)

• page_builder/default_theme/components/atoms/json_canvas_renderer.tsx
  • @@ -81,11 +81,36 @@ function canvasColorToCssColor(color: CanvasColor): string {
    } } + interface StyleConstructor { + [key: string]: string | number | undefined | null; + } + + function constructStyle(c: StyleConstructor): string { + return Object.entries(c).map(([key, value]) => { + if (!value) { + return null; + } + + return key + ":" + (typeof value === "number" ? value + "px" : value); + }).filter((s): s is string => !!s).join(";"); + } + interface TextNodeRendererProps { node: TextNode<unknown>; } function TextNodeRenderer({ node }: TextNodeRendererProps) { + const containerStyle: StyleConstructor = { + width: node.width, + height: node.height, + }; + + // NOTE: Safari can't render `<foreignObject>` correctly. + // In this case, Safari renders an overflowing element at completely incorrect + // position and size, which makes the element invisible (outside viewport). + // https://github.com/mdn/content/issues/1319 + // https://bugs.webkit.org/show_bug.cgi?id=90738 + // https://bugs.webkit.org/show_bug.cgi?id=23113 return ( <foreignObject x={node.x}
  • @@ -95,7 +120,7 @@ function TextNodeRenderer({ node }: TextNodeRendererProps) {
    > <div xmlns="http://www.w3.org/1999/xhtml" - style={`width: ${node.width}px;height: ${node.height}px;`} + style={constructStyle(containerStyle)} className={C.Embed} > {node.text}
  • @@ -109,6 +134,17 @@ interface LinkNodeRendererProps {
    } function LinkNodeRenderer({ node }: LinkNodeRendererProps) { + const iframeStyles: StyleConstructor = { + width: node.width, + height: node.height, + }; + + // NOTE: Safari can't render `<foreignObject>` correctly. + // In this case, Safari renders an overflowing element at completely incorrect + // position and size, which makes the element invisible (outside viewport). + // https://github.com/mdn/content/issues/1319 + // https://bugs.webkit.org/show_bug.cgi?id=90738 + // https://bugs.webkit.org/show_bug.cgi?id=23113 return ( <foreignObject x={node.x}
  • @@ -118,7 +154,7 @@ function LinkNodeRenderer({ node }: LinkNodeRendererProps) {
    > <iframe xmlns="http://www.w3.org/1999/xhtml" - style={`width: ${node.width}px;height: ${node.height}px;`} + style={constructStyle(iframeStyles)} src={node.url} /> </foreignObject>
  • @@ -146,20 +182,6 @@ function FileNodeRenderer({ node }: FileNodeRendererProps) {
    ); } - interface StyleConstructor { - [key: string]: string | number | undefined | null; - } - - function constructStyle(c: StyleConstructor): string { - return Object.entries(c).map(([key, value]) => { - if (!value) { - return null; - } - - return key + ":" + (typeof value === "number" ? value + "px" : value); - }).filter((s): s is string => !!s).join(";"); - } - type VerticalAlign = "top" | "center" | "bottom"; type HorizontalAlign = "left" | "center" | "right";