Servo: Rotating squares in the background in twgljs.org is not rendered

Created on 7 May 2020 · 4Comments · Source: servo/servo

While checking https://twgljs.org/ on Firefox, we can see many squares rotating in the background but, in Servo, we can only see a blue background without rotating squares.

| Servo | Firefox |
| --- | --- |
| | |

Built with latest master (5ee1a48d82) on macOS 10.14.6

A-layou2020 A-layouuncategorized C-has-manual-testcase

Source

CYBAI

Most helpful comment

Here's a minimal testcase for layout 2020:

<html>
<style>
html {
  background-color: blue
}
#frame {
  background-color: rgb(0, 0, 0, 0.7);
  color: #ddd;
}
#background {
  position: fixed;
  width: 100px;
  height: 100px;
  z-index: -1;
  background-color: green;
}
</style>
<div id="background"></div>
<div id="frame">hi</div>

jdm on 7 May 2020

❤2

All 4 comments

I am able to reproduce this issue in Windows 10 in the latest nightly build.

atouchet on 7 May 2020

👍1

Here's a minimal testcase:

<div style="position: fixed; width: 100px; height: 100px; z-index: -1; background-color: green"></div>

If we don't use position fixed or z-index, the green box appears. In Layout 2013 this shows a blank page. In layout 2020 we see a green box, but I still don't see the background canvas on the original website.

jdm on 7 May 2020

Here's a minimal testcase for layout 2020:

<html>
<style>
html {
  background-color: blue
}
#frame {
  background-color: rgb(0, 0, 0, 0.7);
  color: #ddd;
}
#background {
  position: fixed;
  width: 100px;
  height: 100px;
  z-index: -1;
  background-color: green;
}
</style>
<div id="background"></div>
<div id="frame">hi</div>

jdm on 7 May 2020

❤2

I believe that fixing this depends on #26121.