vue頁面無法正常渲染的問題

問題描述

開發過程中發現有其中一台Mac測試機上的某一個頁面渲染有問題，刷新頁面后頁面正常顯示然后頁面閃動一下，部分dom就消失了。

問題分析

測試頁面發現原始頁面有滾動條，到初始化頁面后滾動條看不到了，頭部的dom也看不到了。通過縮放視口或者鼠標移動到滾動條處可以讓隱藏的dom正常顯示，猜想可能由於某些原因導致頁面初始化渲染異常，解決方法嘗試在數據加載之后手動改變元素寬高重新渲染頁面。

問題解決

經嘗試發現在控制台手動改變元素寬度或高度都可以導致頁面重新渲染。

$http(url, params, (res) => {
	this.list = res.data || []
	
	// 注意在這里改變頁面高度讓頁面重新渲染
	const height = document.querySelector('#box').offsetHeight + 1
	setTimeout(() => {
		document.querySelector('#box').style.height = `${height}px`
	}, 30)
})