我一直在玩一个基于Angular Material的网站，我在codepen.io上发现了一个很酷的笔，它有一个高大的工具栏，缩小到较小的一个，同时从背景图像变为纯色。如果单击以下链接，您可以看到该示例： Angular material alpha toolbar - codepen
PS：图片似乎不再被托管，所以它是一个空白的div。
在Codepen上查看示例时，此代码在Safari中工作正常，但在我的本地站点上，md工具栏的高度仅为181px，这使得工具栏下方的内容重叠。
我查看了代码，问题似乎与getBoundingClientRect有关，当它在控制台中输入时如下：
document.querySelector('[md-page-header]').getBoundingClientRect()
将所有值返回为undefined。所以底部，左侧，右侧，顶部，宽度和高度都是未定义的。但是，如果我执行以下操作：
document.querySelector('[md-page-header]').getBoundingClientRect().height
我得到了元素高度的正确值。
我在Google上寻找答案，但无法找到相关内容。任何人都可以解释为什么会发生这种情况，如果有办法解决这个问题吗？