Skip to content

Commit

Permalink
Fix attribute plot layout issue in Safari by adjusting VegaLite compo…
Browse files Browse the repository at this point in the history
…nent's CSS position
  • Loading branch information
JakeWags committed Feb 3, 2025
1 parent 17150e2 commit 6c4edfc
Showing 1 changed file with 5 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,11 @@ export const MemoizedDensityVega: FC<Props> = memo(
);

return (
<VegaLite renderer="svg" spec={spec} actions={false} height={height} />
// @ts-expect-error: VegaLite plots render with position: relative, which breaks the layout in webkit (safari).
// This fix does NOT affect the layout in other browsers, and is necessary to prevent the layout from breaking in safari.
// Part of the reason this is necessary is because we are required to use !important to override the position property set by react-vega;
// However, react does NOT support !important in inline styles, so we have to use the css prop to apply the style.
<VegaLite renderer="svg" spec={spec} actions={false} height={height} css={{ position: 'initial !important' }} />
);
},
// Instead of checking all values, we assume that equal length & equal first & last elements are sufficient
Expand Down

0 comments on commit 6c4edfc

Please sign in to comment.