Skip to content

fix: revert PR #169 — hillshade renders opaque, base map invisible #171

@jasoneplumb

Description

@jasoneplumb

Symptoms

After v0.31.0-beta with PR #169 merged, enabling the Hillshade overlay makes the hillshade layer render fully opaque — the base map underneath is no longer visible at all.

Root cause

PR #169 moved mix-blend-mode: multiply from .hillshade-blend (the Leaflet layer container) to .hillshade-blend img.leaflet-tile (individual tile images).

The intent was to escape the transformed .leaflet-tile-container's stacking context, but I had the direction backwards: applying the blend AT the tile image places it INSIDE the transformed container's stacking context. That context contains only the hillshade tile images — there's nothing else to multiply against, so the blend has no backdrop and renders the source pixels as-is (opaque).

The correct placement is at .hillshade-blend (the layer-level container), which sits at the same level as the base layer's container under .leaflet-tile-pane. There the multiply blend has the base layer as a sibling backdrop.

Fix

  1. Revert the selector change.
  2. Add isolation: isolate to #map so the map is a clean stacking-context root — this prevents ancestor compositing layers from isolating the blend from its intended backdrop, which was the actual original "sometimes not applied" symptom from fix(hillshade): mix-blend-mode sometimes not applied at closest zoom on topo layer #168.

Acceptance

  • Hillshade with topographic basemap shows BOTH layers blended (slopes shaded, base-map color preserved on flat areas)
  • Multiply blend stays consistent at all zoom levels
  • npm run type-check && npm run lint && npm test clean

Metadata

Metadata

Assignees

No one assigned

    Labels

    P1Critical — fix immediatelybugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions