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)
})