Fix ImageLayer horizontal overflow with wide elements on Chromium (!1251) · Merge requests · Arkindex / Frontend

Erwan Rouchet requested to merge fix-chromium-wide-elements-overflow into master Apr 13, 2022

It took me a long while to narrow the issue down to elements that are always wider than they are tall, and to the <svg> element on the ImageLayer.

I found this by just testing a lot of random CSS properties to try to get the SVG tag to stop exceeding the page; setting min- and max- width and height made no difference at all. object-fit: contain does not work here because an SVG element is not a replaced element, and setting a maximum width on the whole columns in vue/Element/Main.vue does not block anything either. But for some reason, width: 0 fixes everything…

Tested on Firefox 99.0.1 on Windows 10.0.17763.379, Firefox Developer 100.0b4 on Ubuntu 20.04.4, Chromium 102.0.4998.0 on Ubuntu 20.04.4, Chromium 102.0.4978.0 on Windows 10.0.17763.379, Edge 100.0.1185.39 on Windows 10.0.17763.379.

Fix ImageLayer horizontal overflow with wide elements on Chromium

Merge request reports