Bug 276076
| Summary: | Disappearing tiles / content when rending Leaflet maps | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | sidwirb |
| Component: | WebKitGTK | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Minor | CC: | aperez, bugs-noreply, cgarcia, webkit-bug-importer |
| Priority: | P2 | ||
| Version: | Other | ||
| Hardware: | PC | ||
| OS: | Linux | ||
sidwirb
Steps to Reproduce:
Create a GTK application embedding a WebKitGTK web view.
Load a Leaflet map in the web view.
Move the map around to trigger tile loading.
Observe that some tiles fail to load and remain gray.
Expected Results:
Tiles should load correctly after a short delay, similar to the behavior observed in standard web browsers.
Actual Results:
Tiles go gray and do not load even after waiting for an extended period.
Additional Information:
WebKitGTK Version: 2.44.2 (replace with your version)
System: Ubuntu 24.04 LTS
GTK Version: 3.24.41
Error Messages:
When enabling debug logs for WebKitGTK, no specific error messages are observed.
Zooming out / in the map seems to reload tiles, but this should not be required.
Example Code:
Here's a minimal example of the GTK application embedding the WebKitGTK web view:
#include <gtk/gtk.h>
#include <webkit2/webkit2.h>
static void activate(GtkApplication *app, gpointer user_data) {
GtkWidget *window;
GtkWidget *web_view;
window = gtk_application_window_new(app);
gtk_window_set_title(GTK_WINDOW(window), "Simple WebKitGTK App");
gtk_window_set_default_size(GTK_WINDOW(window), 800, 600);
web_view = webkit_web_view_new();
webkit_web_view_load_uri(WEBKIT_WEB_VIEW(web_view), "https://www.openstreetmap.org/");
gtk_container_add(GTK_CONTAINER(window), web_view);
gtk_widget_show_all(window);
}
int main(int argc, char **argv) {
GtkApplication *app;
int status;
app = gtk_application_new("org.gtk.example", G_APPLICATION_FLAGS_NONE);
g_signal_connect(app, "activate", G_CALLBACK(activate), NULL);
status = g_application_run(G_APPLICATION(app), argc, argv);
g_object_unref(app);
return status;
}
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
sidwirb
Upon further investigation, it appears that this issue is related to the use of translate3d() on images, if images are moved outside the window, then moved back, they do not render anymore. Testing with a colored div showed that the behavior only seems to affect images.
This is the html I used for testing:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Translate3D Bounce Test</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
overflow: hidden;
margin: 0;
}
#box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
transition: transform 0.03s linear;
}
#image {
width: 100px;
height: 100px;
background-image: url('https://via.placeholder.com/100');
background-size: cover;
position: absolute;
transition: transform 0.03s linear;
}
</style>
</head>
<body>
<!-- <div id="box"></div> -->
<div id="image"></div>
<script>
// const box = document.getElementById('box');
const box = document.getElementById('image');
let x = 100;
let y = 100;
let z = 0;
let dx = 15;
let dy = 15;
offset = 200;
function bounce() {
const rect = box.getBoundingClientRect();
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
if (rect.right + dx > windowWidth + offset || rect.left + dx + offset < 0) {
dx = -dx;
}
if (rect.bottom + dy > windowHeight + offset || rect.top + dy + offset < 0) {
dy = -dy;
}
x += dx;
y += dy;
box.style.transform = `translate3d(${x}px, ${y}px, ${z}px)`;
requestAnimationFrame(bounce);
}
bounce();
</script>
</body>
</html>
Carlos Garcia Campos
Probably fixed by https://commits.webkit.org/279898@main
Adrian Perez
(In reply to Carlos Garcia Campos from comment #2)
> Probably fixed by https://commits.webkit.org/279898@main
Indeed, marking as duplicate.
*** This bug has been marked as a duplicate of bug 271379 ***