Using tiles with alpha channel causes flicker #7416

Thoughtyness · 2021-01-20T05:30:10Z

Current behavior

When using image tiles with an alpha channel, and the map is zoomed in or out (currently using whole steps), each tile first render a lot darker than it should be. I believe this is because it is first rendered without the alpha channel. This darker version lasts for a fraction of second until the tile is properly rendered. Because this transition is abrupt, it causes a flickering effect.

Expected behavior

No flickering. I expect it to work the same with image tiles containing an alpha channel as it does with those without.

Environment

Leaflet 1.6.0
Tested using Safari 14.0.1, Chrome 87.0.4280.141, and Firefox 84.0.2
On MacOS 10.15.7

Additional context

If the requests are made directly to the image file, this behavior happens in unison across all rendered tiles and isn't very jarring. However, my application generates the tiles on the fly which causes the effects to happen at slightly different times for each tile. This makes for a very unpleasant rendering. To replicate this, I redirect requests to a PHP script.

Minimal example reproducing the issue

Unfortunately, due to needing tiles with varying opacity and sending requests to a PHP script, I am unable to use JS Fiddle. I have decided to create a repository (https://github.com/Thoughtyness/Flicker_Example) that contains everything needed to reproduce this. There are two folders "tiles_with_alpha" and "tiles_without_alpha" which can be used to see that the flickering only occurs when alpha tiles are used. I also left a commented line in index.php which will bypass the PHP script. A copy the code is below:

index.php:

<!DOCTYPE html>
<html>
  <head>
    <title>Test Flicker</title>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
    <link href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" rel="stylesheet"/>
  </head>
  <body>
  <div id="mapid" style="height:100vh;"></div>
    <script type="text/javascript">
      const region=L.tileLayer(
        'https://localhost/flicker_test/response.php?z={z}&x={x}&y={y}',
        //'https://localhost/flicker_test/tiles_with_alpha/{z}-{x}-{y}.png',
        {
          minZoom: 2,
          maxZoom: 5,
          tileSize: 256,
          renderer: L.canvas(),
        }
      );
      let map = L.map('mapid',{
        center: [70,45],
        zoom: 3,
        layers: [region],
      });
    </script>
  </body>
</html>

response.php:

<?php
  $z=$_GET["z"];
  $x=$_GET["x"];
  $y=$_GET["y"];

  header("Content-type: image/png");
  readfile("https://localhost/flicker_test/tiles_with_alpha/".$z."-".$x."-".$y.".png");
?>

timbtimbtimb · 2022-11-18T11:53:18Z

For me it only happens on Chrome on mobile (fine on Firefox mobile). Leaflet 1.7.1 is fine but the problem starts at 1.8.0.

no-flashing.1.mp4

flashing.1._____1.mp4

Malvoz added the needs investigation label Apr 24, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using tiles with alpha channel causes flicker #7416

Using tiles with alpha channel causes flicker #7416

Thoughtyness commented Jan 20, 2021 •

edited by Malvoz

timbtimbtimb commented Nov 18, 2022 •

edited

Using tiles with alpha channel causes flicker #7416

Using tiles with alpha channel causes flicker #7416

Comments

Thoughtyness commented Jan 20, 2021 • edited by Malvoz

Current behavior

Expected behavior

Environment

Additional context

Minimal example reproducing the issue

timbtimbtimb commented Nov 18, 2022 • edited

Thoughtyness commented Jan 20, 2021 •

edited by Malvoz

timbtimbtimb commented Nov 18, 2022 •

edited