Browser Inconsistency: Unset color channel #62
Description
It's interesting, in the following state, in Chrome the background of the Layout is magenta/pink but in Firefox it is white. The relevant data is:
"stageBackgroundColor": {
"instance": {
"L": "100.00000",
"C": "100.00000"
},
"colorTypeKey": "OKLCH"
}
Note that the Hue channel H is unset. I think the correct/expected behavior is probably showing the pink color, as Chroma C is turned on to full.
In inspector the color is set as oklch(1 0.4 none), setting oklch(1 0.4 0) fixes the inconsistency. In comonents/color.mjs we have a function _culoriFixZeros maybe we need to apply it in the context of culoris formatCss function as well.
{
"activeState": {
"t": "0",
"duration": "54",
"axesMath": {
"items": [
{
"instance": {
"axesLocationValuesMap": [
[
"opsz",
[
{
"logicalValue": "min"
},
{
"logicalValue": "default"
},
{
"logicalValue": "max"
}
]
],
[
"wdth",
[
{
"logicalValue": "default"
},
{
"logicalValue": "min"
},
{
"logicalValue": "max"
}
]
],
[
"wght",
[
{
"logicalValue": "default"
},
{
"logicalValue": "min"
},
{
"logicalValue": "max"
}
]
]
]
},
"axesMathItemTypeKey": "LocationsProduct"
}
]
},
"videoproofArrayV2": {
"isLoop": "1",
"label": "",
"keyMoments": [
{
"label": "opsz: min, wdth: default, wght: default",
"duration": "1",
"axesLocations": [
[
"opsz",
"8"
],
[
"wdth",
"100"
],
[
"wght",
"400"
]
],
"charGroup": {
"options": "all-gid"
},
"stageBackgroundColor": {
"instance": {
"L": "100.00000",
"C": "100.00000"
},
"colorTypeKey": "OKLCH"
}
},
{
"label": "opsz: min, wdth: default, wght: min",
"duration": "1",
"axesLocations": [
[
"opsz",
"8"
],
[
"wdth",
"100"
],
[
"wght",
"100"
]
]
},
{
"label": "opsz: min, wdth: default, wght: max",
"duration": "1",
"axesLocations": [
[
"opsz",
"8"
],
[
"wdth",
"100"
],
[
"wght",
"1000"
]
]
},
{
"label": "opsz: min, wdth: min, wght: default",
"duration": "1",
"axesLocations": [
[
"opsz",
"8"
],
[
"wdth",
"25"
],
[
"wght",
"400"
]
]
},
{
"label": "opsz: min, wdth: min, wght: min",
"duration": "1",
"axesLocations": [
[
"opsz",
"8"
],
[
"wdth",
"25"
],
[
"wght",
"100"
]
]
},
{
"label": "opsz: min, wdth: min, wght: max",
"duration": "1",
"axesLocations": [
[
"opsz",
"8"
],
[
"wdth",
"25"
],
[
"wght",
"1000"
]
]
},
{
"label": "opsz: min, wdth: max, wght: default",
"duration": "1",
"axesLocations": [
[
"opsz",
"8"
],
[
"wdth",
"151"
],
[
"wght",
"400"
]
]
},
{
"label": "opsz: min, wdth: max, wght: min",
"duration": "1",
"axesLocations": [
[
"opsz",
"8"
],
[
"wdth",
"151"
],
[
"wght",
"100"
]
]
},
{
"label": "opsz: min, wdth: max, wght: max",
"duration": "1",
"axesLocations": [
[
"opsz",
"8"
],
[
"wdth",
"151"
],
[
"wght",
"1000"
]
]
},
{
"label": "opsz: default, wdth: default, wght: default",
"duration": "1",
"axesLocations": [
[
"opsz",
"14"
],
[
"wdth",
"100"
],
[
"wght",
"400"
]
]
},
{
"label": "opsz: default, wdth: default, wght: min",
"duration": "1",
"axesLocations": [
[
"opsz",
"14"
],
[
"wdth",
"100"
],
[
"wght",
"100"
]
]
},
{
"label": "opsz: default, wdth: default, wght: max",
"duration": "1",
"axesLocations": [
[
"opsz",
"14"
],
[
"wdth",
"100"
],
[
"wght",
"1000"
]
]
},
{
"label": "opsz: default, wdth: min, wght: default",
"duration": "1",
"axesLocations": [
[
"opsz",
"14"
],
[
"wdth",
"25"
],
[
"wght",
"400"
]
]
},
{
"label": "opsz: default, wdth: min, wght: min",
"duration": "1",
"axesLocations": [
[
"opsz",
"14"
],
[
"wdth",
"25"
],
[
"wght",
"100"
]
]
},
{
"label": "opsz: default, wdth: min, wght: max",
"duration": "1",
"axesLocations": [
[
"opsz",
"14"
],
[
"wdth",
"25"
],
[
"wght",
"1000"
]
]
},
{
"label": "opsz: default, wdth: max, wght: default",
"duration": "1",
"axesLocations": [
[
"opsz",
"14"
],
[
"wdth",
"151"
],
[
"wght",
"400"
]
]
},
{
"label": "opsz: default, wdth: max, wght: min",
"duration": "1",
"axesLocations": [
[
"opsz",
"14"
],
[
"wdth",
"151"
],
[
"wght",
"100"
]
]
},
{
"label": "opsz: default, wdth: max, wght: max",
"duration": "1",
"axesLocations": [
[
"opsz",
"14"
],
[
"wdth",
"151"
],
[
"wght",
"1000"
]
]
},
{
"label": "opsz: max, wdth: default, wght: default",
"duration": "1",
"axesLocations": [
[
"opsz",
"144"
],
[
"wdth",
"100"
],
[
"wght",
"400"
]
]
},
{
"label": "opsz: max, wdth: default, wght: min",
"duration": "1",
"axesLocations": [
[
"opsz",
"144"
],
[
"wdth",
"100"
],
[
"wght",
"100"
]
]
},
{
"label": "opsz: max, wdth: default, wght: max",
"duration": "1",
"axesLocations": [
[
"opsz",
"144"
],
[
"wdth",
"100"
],
[
"wght",
"1000"
]
]
},
{
"label": "opsz: max, wdth: min, wght: default",
"duration": "1",
"axesLocations": [
[
"opsz",
"144"
],
[
"wdth",
"25"
],
[
"wght",
"400"
]
]
},
{
"label": "opsz: max, wdth: min, wght: min",
"duration": "1",
"axesLocations": [
[
"opsz",
"144"
],
[
"wdth",
"25"
],
[
"wght",
"100"
]
]
},
{
"label": "opsz: max, wdth: min, wght: max",
"duration": "1",
"axesLocations": [
[
"opsz",
"144"
],
[
"wdth",
"25"
],
[
"wght",
"1000"
]
]
},
{
"label": "opsz: max, wdth: max, wght: default",
"duration": "1",
"axesLocations": [
[
"opsz",
"144"
],
[
"wdth",
"151"
],
[
"wght",
"400"
]
]
},
{
"label": "opsz: max, wdth: max, wght: min",
"duration": "1",
"axesLocations": [
[
"opsz",
"144"
],
[
"wdth",
"151"
],
[
"wght",
"100"
]
]
},
{
"label": "opsz: max, wdth: max, wght: max",
"duration": "1",
"axesLocations": [
[
"opsz",
"144"
],
[
"wdth",
"151"
],
[
"wght",
"1000"
]
]
}
],
"activeActors": [
{
"instance": {
"isLoop": "1",
"label": "",
"keyMoments": [
{
"label": "",
"duration": "1"
}
]
},
"actorTypeKey": "VideoproofArrayV2CellActorModel"
}
],
"localActiveFontKey": "from-url Roboto Flex Regular Version_3-200 gftools_0-9-32_"
}
},
"activeLayoutKey": "VideoproofArray",
"activeFontKey": "from-url Roboto Flex Regular Version_3-200 gftools_0-9-32_"
}