transform 遇上 position: fixed

最近遇到一个有意思的现象，以下 demo 中 fixed 的元素没有相对 viewport 定位，而是相对于它的父元素进行定位。

<html>
　　<head>
　　<style>
　　　　.parent {
　　　　　　width: 200px;
　　　　　　height: 300px;
　　　　　　background: yellow;
　　　　　　transform: scale(1);
　　　　　}
　　　　.fixed {
　　　　　　position: fixed;
　　　　　　left: 0;
　　　　　　right: 0;
　　　　　　bottom: 0;
　　　　　　background: red;
　　　　}
　　　</style>
　　</head>
　　<body>
　　　　<div class='parent'>
　　　　parent
　　　　　　<div class='fixed'>fixed</div>
　　　　</div>
　　</body>
</html>

在 w3c 中对 position: fixed 的[定义](https://www.w3.org/TR/css-position/#fixed-pos)如下：

Fixed positioning is similar to absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.

大概意思就是，fixed 元素的块级格式上下文 Block Formatting Context（BFC）由 viewport 创建，也就是fixed 元素的 BFC 包含在根元素的 BFC 里。

那以上 demo 的表现就说不过去了。为什么呢