RESOLVED DUPLICATE of bug 271379 276076
Disappearing tiles / content when rending Leaflet maps 
https://bugs.webkit.org/show_bug.cgi?id=276076
Summary Disappearing tiles / content when rending Leaflet maps
sidwirb
Reported 2024-07-01 08:28:06 PDT
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
Comment 1 2024-07-05 07:36:07 PDT
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
Comment 2 2024-07-05 07:42:56 PDT
Probably fixed by https://commits.webkit.org/279898@main
Adrian Perez
Comment 3 2024-10-30 13:45:52 PDT
(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 ***
Note You need to log in before you can comment on or make changes to this bug.