Bug 242020

Summary:

Fixed background-attachment on scrolling element misbehaving.

Product:

WebKit

Reporter:

omimanav

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Major

CC:

bfulgham, omimanav, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Other

Hardware:

All

OS:

All

Attachments:

Description	Flags
Video with code, demonstrating the issue, notice the laggy/glitchy behaviour.	none
Test case	none

Description omimanav 2022-06-26 22:34:16 PDT

Created attachment 460500 [details]
Video with code, demonstrating the issue, notice the laggy/glitchy behaviour.

See video attached; as if a fixed background on a scrolling body has a hard time rendering on scroll instead of being a fixed background. I've included the test code below. This isn't an issue on any other browser.
Browser in video is Gnome Web (latest version as of 27/7/22 on Ubuntu repository).
The body is the scrolling element and the background of it tries to keep up with scrolling instead of remaining static/fixed.

Example code shown in video to demonstrate the issue:

<head>
<style>
	div {
		height: 450vh;
		width: 100vw;
		padding: 0;
		margin: 0;
	}

	body {
		background: url("https://i.ibb.co/4FXCrmS/1651208527285.gif");
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-size: cover;
	}
</style>
</head>

<body>
	<div>Test div block</div>
</body>

```

Comment 1 omimanav 2022-06-27 11:37:03 PDT

It's an issue on macOS 10.15 Safari (don't recall what version) and misbehaving albeit differently to this on iOS 15 (doesn't behave as "fixed" attachment). Please consider leaving this an issue on all platforms not just Linux.

Comment 2 Simon Fraser (smfr) 2022-06-27 11:42:12 PDT

I don't see any performance issues on macOS, and on iOS `background-attachment: fixed;` is not supported.

Comment 3 Simon Fraser (smfr) 2022-06-27 11:42:29 PDT

Created attachment 460503 [details]
Test case

Comment 4 Radar WebKit Bug Importer 2022-07-03 22:35:13 PDT

<rdar://problem/96380216>