browser-compat-bugs icon indicating copy to clipboard operation
browser-compat-bugs copied to clipboard

Published 20 hours ago • verified publisher icon webcompat

CSS multi-column and SVG renders differently in Chrome compared to Safari and Firefox

Open zcorpan opened this issue 4 years ago • 2 comments

Describe the issue Using multiple SVG images without specified dimensions in CSS multicol (columns: 2) renders differently in Chrome compared to Safari and Firefox. Chrome renders the images in one column, Safari and Firefox side by side in 2 columns.

Technologies Involved CSS multi-column, SVG

Browsers Tested

  • Chrome 93.0.4577.82 (Official Build) (x86_64) on macOS 11.4
  • Safari Version 14.1.1 (16611.2.7.1.4) on macOS 11.4
  • Firefox Nightly 94.0a1 (2021-09-23) (64-bit)

Testcase https://codepen.io/zcorpan/pen/dyRLYLa

Screenshots Chrome: two circles in one column

Safari: two circles side by side

Firefox: two circles side by side

Additional context Add any other context about the problem here.

zcorpan avatar Oct 01 '21 14:10 zcorpan

@mstensho might you be able to help triage this issue, to figure out which browser or spec bugs this is about?

foolip avatar Oct 12 '21 15:10 foolip

Orphans and widows. Initial value is 2. There are two lines, which should be kept together in the same fragmentainer.

mstensho avatar Oct 12 '21 17:10 mstensho