Simple Page with 5 absolutely positioned transformed elements and drawing SVG Overlays does not work

[jogibear9988]

look at : https://jogibear9988.github.io/getBoxQuadsPolyfill/

Bugs on this page:

• not all controls are shown
• overlays are at the wrong position (moved left and down a few pixel)
• if select has focus, changeing value with keyup/down does not work
• light blue background of outer div does not work

looks like this in chrome:

and like this in ladybird:

It only contains some simple absolutely positioned and transformed elements.

There are no errors in the console:

[jogibear9988]

and also, the one overlay wich is drawn is offset

[ADKaster]

It would be a lot easier to debug and fix this issue if you could provide a short ~10 line HTML/CSS reproduction of each issue.

[jogibear9988]

This is now fixed

https://jogibear9988.github.io/laydibird-issues/issue1.html

rotation does not work

Chrome:

Ladybird

[jogibear9988]

This is now fixed

https://jogibear9988.github.io/laydibird-issues/issue2.html

background color not rendered

Chrome:

Ladybird:

[jogibear9988]

https://jogibear9988.github.io/laydibird-issues/issue3.html

2nd child of container not rendered

Chrome:

Ladybird:

[jogibear9988]

this is now fixed...

https://jogibear9988.github.io/laydibird-issues/issue4.html

offsetLeft/offsetTop have wrong values

spec: https://www.w3.org/TR/cssom-view-1/#extensions-to-the-htmlelement-interface

Chrome:

Ladybird:

[jogibear9988]

@ADKaster okay like this?

[jogibear9988]

Issue 4 is fixed in current ladiybird. The other 3 pages still render wrong

[jogibear9988]

So now much more transformations seem to work, but the page still has some wrong:

Chrome:

Ladybird: