Opened 5 years ago
Closed 3 years ago
#15466 closed bug (fixed)
Webkit: CSS rotation produces wrong result
| Reported by: | WildKeccak | Owned by: | pulkomandy |
|---|---|---|---|
| Priority: | normal | Milestone: | R1/beta3 |
| Component: | Kits/Web Kit | Version: | R1/Development |
| Keywords: | Cc: | ||
| Blocked By: | Blocking: | #15479 | |
| Platform: | x86-64 |
Description
observed on: https://ecommerce-platforms.com/articles/ecommerce-store-design
hrev53569 Ryzen 5 3400G Radeon 5700XT 8 GB (being used)
Tested on the latest Web+ and Qupzilla
The rotated text, which basically shouldn't even be moving, is moving diagonally down the page and to the left.
Attachments (3)
Change History (15)
by , 5 years ago
| Attachment: | 11012019_183843_VCP_2019-11-01_18-43-02_945.mov added |
|---|
by , 5 years ago
| Attachment: | 11012019_190320_VCP_2019-11-01_19-07-16_539.mov added |
|---|
The behavior in Qupzilla (correct?)
comment:1 by , 5 years ago
Something similar happens at similarweb.com, with regards to the magnifying glass.
comment:4 by , 4 years ago
| Blocking: | 15479 added |
|---|
comment:5 by , 4 years ago
This is reproducible in https://linuxfr.org/ as well:
- Two vertical texts on the left (username and "Rédaction") initially show at the correct place, but when scrolling the page down, they move to the down-left instead of moving up
- I don't know if it is related, but also when scrolling, several icons on the page (for tags, pages with new comments, "proposer un contenu" button) disappear. I guess they are scrolled in the wrong direction and then clipped out
I think fixing this would help with several glitches in WebKit rendering. It's probably a problem in handling transforms (applying them in the wrong order, using premultiply instead of multiply, or something like that).
comment:6 by , 4 years ago
| Component: | Applications/WebPositive → Kits/Web Kit |
|---|---|
| Summary: | rotated text moves to the left as the page scrolls down → Webkit: CSS rotation produces wrong result |
comment:8 by , 4 years ago
Using https://www.html-code-generator.com/css/rotate-generator with the slider and a div box shows the box rotating around the bottom of the page instead of itself.
Issue is probably somewhere with BAffineTransform transformations in Webkit Code (or in how it calls this)
comment:9 by , 4 years ago
I made a simpler test using a file from the artwork:
If you scroll down the page the images move to the right instead of staying put visually. And if the view is resized in its width the images move up and down instead of staying anchored.
I hope this helps a bit
<html>
<head>
<title>Css rotation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.rotated {
transform: rotate(45deg);
}
</style>
</head>
<body>
<img src="./HAIKU square - white on blue.png"/>
<img src="./HAIKU square - white on blue.png"/>
<div class="rotated">
<img src="./HAIKU square - white on blue.png" />
</div>
<img src="./HAIKU square - white on blue.png" />
<div class="rotated">
<img src="./HAIKU square - white on blue.png" />
</div>
<div class="rotated">
<img src="./HAIKU square - white on blue.png" />
</div>
<img src="./HAIKU square - white on blue.png" />
</div>
</body>
</html>
comment:10 by , 3 years ago
I'm a bit at a loss, i tested with my file and Safari aswell as Otter produce the same rendering, so my example probably isn't it... my guess would be that it may be some css anchor propertie not beeing respected correctly? Atleast it doesn't seem like css rotations anymore :/
comment:11 by , 3 years ago
Seems the problem is just with scrolling and transforms, tge initia rendering is the same as safari and otter, but scrolling down seems to be bugged somehow.
comment:12 by , 3 years ago
| Milestone: | Unscheduled → R1/beta3 |
|---|---|
| Resolution: | → fixed |
| Status: | new → closed |
This will be fixed in the next webkit release (replaced a PreMultiply by a Multiply in the GraphicsContextHaiku::concatCTM method).
The behavior in WebPositive