Atlaslog
Atlaslog / Field Notes / Styling & rendering
Field note · Styling & rendering

Eight-digit hex color is ignored by an older embedded browser

Quick answer

`fillColor: '#1a6fd4cc'` renders in current Chrome, but the layer is completely invisible in a client's Chromium 76 embedded browser. SVG 1.1 does not accept `#RRGGBBAA`, so the `fill` value is treated as invalid and nothing is drawn.

Last verified 2026-11-03 · Multiple versions · Cite this page
Applies to: Leaflet 1.9.x / SVG 1.1 / Chromium 76 and older
Symptom
Checklist
  1. Read the `fill` attribute string on the path in the Elements panel
  2. Paste the value into a CSS `background-color` to see whether the engine parses it
  3. Run `CSS.supports('color', '#1a6fd4cc')` inside the target browser
  4. Compare rendering across new and old engines to rule out a data problem
  5. Check whether the alpha was meant for `fillOpacity` in the first place
Fix

Keep the color six digits and set opacity separately (`fillColor: '#1a6fd4', fillOpacity: 0.8`); if eight-digit values already exist, split them at runtime with `hex.slice(0, 7)` and `parseInt(hex.slice(7), 16) / 255`.

Code
console.log(CSS.supports('color', '#1a6fd4cc'));   // false  -> 该内核不支持八位色值
console.log(document.querySelector('path').getAttribute('fill'));   // #1a6fd4cc
L.geoJSON(data, {
  style: {
    fillColor: '#1a6fd4',
    fillOpacity: 0.8,
    color: '#1259ad',
    opacity: 0.9,
    weight: 1
  }
}).addTo(map);
Watch out
All 120 field notesChinese originalRunnable examples
English edition written for Atlaslog from the original Chinese field note. Code is unchanged and runs as-is.
Cite this page

Atlaslog (2026). Eight-digit hex color is ignored by an older embedded browser. https://www.jingweizhi.com/en/cookbook/color-format-invalid.html (accessed 2026-11-03).