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)

11012019_183843_VCP_2019-11-01_18-43-02_945.mov​ (3.3 MB ) - added by WildKeccak 5 years ago.
The behavior in WebPositive
11012019_190320_VCP_2019-11-01_19-07-16_539.mov​ (2.4 MB ) - added by WildKeccak 5 years ago.
The behavior in Qupzilla (correct?)
screenshot1.mp4​ (1.1 MB ) - added by WildKeccak 5 years ago.
A similar thing happening on similarweb.com

Change History (15)

by WildKeccak, 5 years ago

Attachment: 11012019_183843_VCP_2019-11-01_18-43-02_945.mov​ added

The behavior in WebPositive

by WildKeccak, 5 years ago

Attachment: 11012019_190320_VCP_2019-11-01_19-07-16_539.mov​ added

The behavior in Qupzilla (correct?)

comment:1 by WildKeccak, 5 years ago

Something similar happens at similarweb.com, with regards to the magnifying glass.

by WildKeccak, 5 years ago

Attachment: screenshot1.mp4​ added

A similar thing happening on similarweb.com

comment:2 by WildKeccak, 5 years ago

A similar thing happens on gamefly.com

comment:3 by WildKeccak, 5 years ago

Doesn't seem to be happening today on hrev53903, same system

comment:4 by pulkomandy, 4 years ago

Blocking: 15479 added

comment:5 by pulkomandy, 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 nephele, 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:7 by X512, 4 years ago

Any simple test case?

comment:8 by nephele, 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 nephele, 4 years ago

I made a simpler test using a file from the artwork:

As you can see in this page the rotated image is about one image too high (it should be on the second "line" but it is above the first one) And if you scroll down the page the images move to the right, instead of to the top how they should (as in staying anchored to the other elements visually)

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" alt="eight ball" />
		</div>
		<img src="./HAIKU square - white on blue.png" alt="eight ball" />
		<div class="rotated">
			<img src="./HAIKU square - white on blue.png" alt="eight ball" />
		</div>
		<div class="rotated">
			<img src="./HAIKU square - white on blue.png" alt="eight ball" />
		</div>
		<img src="./HAIKU square - white on blue.png" alt="eight ball" />
		</div>
	</body>
</html>
Version 0, edited 4 years ago by nephele (next)

comment:10 by nephele, 4 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 nephele, 4 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 pulkomandy, 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).

Note: See TracTickets for help on using tickets.