【Electron】SVGをheight: 100%;にした状態で親要素の高さを変更するとレイアウトが崩れる

Question

該当のソースコード

https://codepen.io/anon/pen/WzpJVM

前提・実現したいこと

ただ今Electronにてデスクトップアプリを作成しております。
その途中でどうにも解決できない現象が発生しましたので質問させていただきます。

実現したいことは上記のソースコードの通りなのですが、
SVGを横並びに配置し、その親要素であるulの高さを変更すると、
追従してSVGもリサイズされるという設計にしたいと考えております。

発生している問題・エラーメッセージ

ですがElectronやChromeなどのChromium系統の環境で上記のソースコードを実行すると、
目論見通りSVGのリサイズはされるのですが、なぜか表示位置が変更されずにSVG同士が重なった状態になってしまいます。

FireFoxなどでは表示位置も正しく変更されたので、Chromium特有の現象かと思います。

質問

Electronにおいてでも正しい位置に表示されるような書き方をご教授頂きたいです。
Electronさえ動作すれば問題ないので、他のブラウザでは崩れてしまうといった書き方でも構いません。
できればですがHTMLとcssのみで解決できる方法が望ましいです。

Comments

[defghi1977]

リサイズすると治るので, おそらくBlinkのバグ.対処策はちょっと考えてみます.

Answer 1

この問題はsvg要素に幅の情報が一切存在していないことによります. (display:flex環境下でのテスト不足と思われる)

そこで, ul要素の高さからsvg要素の幅を設定するようにコードを修正してみました.

高さを一箇所で変更可能とするため, CSS変数--heightを介してul要素の高さとsvg要素の幅を設定しています.

<ul id="ul">
	<li>
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
			<rect width="100" height="100" style="fill:#000"/>
		</svg>
	</li>
	<li>
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
			<rect width="100" height="100" style="fill:#00F"/>
		</svg>
	</li>
	<li>
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
			<rect width="100" height="100" style="fill:#F00"/>
		</svg>
	</li>
</ul>
<input type="button" value="button" onClick="onClick()" />

ul {
	--height: 100px;
	height: var(--height);
	display: flex;
	list-style: none;

	> li {
		height: 100%;

		> svg {
			height: 100%;
			width: var(--height);
		}
	}
}

const onClick = function () {
	const ul = document.getElementById('ul');
	//ul.style.height = 200 + 'px';
	ul.style.setProperty("--height", "200px");
}