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.
Symptom
- The layer is entirely absent in the embedded Chromium 76 while no console error is printed
- The DOM keeps the literal `fill="#1a6fd4cc"` on the SVG path
- `CSS.supports('color', '#1a6fd4cc')` returns `false` in that client
Checklist
- Read the `fill` attribute string on the path in the Elements panel
- Paste the value into a CSS `background-color` to see whether the engine parses it
- Run `CSS.supports('color', '#1a6fd4cc')` inside the target browser
- Compare rendering across new and old engines to rule out a data problem
- 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')); // #1a6fd4ccL.geoJSON(data, {
style: {
fillColor: '#1a6fd4',
fillOpacity: 0.8,
color: '#1259ad',
opacity: 0.9,
weight: 1
}
}).addTo(map);
Watch out
- Assuming a color string valid in modern Chrome parses everywhere; SVG 1.1 `fill` rejects eight-digit hex
- Putting `rgba()` into the `fillColor` option, which Leaflet writes into an SVG attribute rather than CSS
English edition written for Atlaslog from the original Chinese field note. Code is unchanged and runs as-is.
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).