flexbugs icon indicating copy to clipboard operation
flexbugs copied to clipboard

webkit not honouring flex-basis percentage width with images

Open ThePeach opened this issue 5 years ago • 1 comments

Came across this one, and cannot figure out if it's been reported yet and where it should be filed under (I would somehow expect this to have been reported already, if not I'll be happy to report this upstream).

Anyhow, here's the live demo: https://codepen.io/ThePeach/pen/QWLpVEO?editors=1100 including a workaround that works on Chrome, but not on Safari. With Safari I hit a problem that the max-width does not respect the ratio of the image.

On Firefox, no probs whatsoever.

Tested with:

  • Safari 12.1.2
  • Chrome 76
  • Firefox 68.0.2

all under OSX 10.14.6

ThePeach avatar Aug 27 '19 09:08 ThePeach

in the meantime, I've refined the workaround, and wrapped the image in a <div> tag which made the webkit workaround stick.

ThePeach avatar Aug 28 '19 07:08 ThePeach