flexbugs
flexbugs copied to clipboard
webkit not honouring flex-basis percentage width with images
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
in the meantime, I've refined the workaround, and wrapped the image in a <div>
tag which made the webkit workaround stick.