[Bug] With hardware acceleration set to false weird behaviour with initial paint for layers

[ToHold]

maplibre-gl-js version: 4.5.0

browser: Chromium 128.0.6613.84

Steps to Trigger Behavior

1. Disable hardware acceleration
2. Use style with a fill extrusion layer
3. Add a layer without paint before this one
4. Set second layer paint with map.getLayer('layer').setPaintProperty()

Link to Demonstration

https://codepen.io/ToHold/pen/abgRaye

Expected Behavior

This should work like with hardware acceleration on

Actual Behavior

Layer are weirdly overlapping each other. In on of my project with threejs, I can see other app windows behind my browser (like vscode).

[HarelM]

Thanks for taking the time to report this issue.
I'm not sure the assumptions that this should work without hardware acceleration is a valid assumption.
Maplibre uses webgl and the GPU heavily...

[neodescis]

We have users running MapLibre without hardware acceleration. It's actually pretty decent if you don't have terrain turned on.

That said, the codepen above has layers overlapping in weird ways for me even with acceleration turned on. The behavior is the same for me with acceleration turned off, aside from being very slow.

[ToHold]

Yes my bad with hardware acceleration, it also happen, should I rename the issue ?

[HarelM]

I believe the correct way to do it would be to use the map API and not the layer API:

map.setPaintProperty('rectangle-layer', 'fill-color', [
    'get',
    'fill-color'
  ]);
	
  map.setPaintProperty('rectangle-layer', 'fill-opacity', [
    'get',
    'fill-opacity'
  ]);

The return type of getLayer is StyleLayer and I don't think it support this method.
See here: https://maplibre.org/maplibre-gl-js/docs/API/classes/StyleLayer/

I would strongly advise to use typescript in order to avoid these kind of issues...

[ToHold]

Well I use Typescript, why not prefix it by underscored then ? Maybe @internal tag would be interesting too.

[ToHold]

And yes I also have users without hardware acceleration that's why I encounter some bugs, yes this one isnt related to hardware acceleration but I can't easly reproduce it in a codepen.

[ToHold]

I believe the correct way to do it would be to use the map API and not the layer API:

map.setPaintProperty('rectangle-layer', 'fill-color', [
    'get',
    'fill-color'
  ]);
	
  map.setPaintProperty('rectangle-layer', 'fill-opacity', [
    'get',
    'fill-opacity'
  ]);

The return type of getLayer is StyleLayer and I don't think it support this method. See here: https://maplibre.org/maplibre-gl-js/docs/API/classes/StyleLayer/

I would strongly advise to use typescript in order to avoid these kind of issues...

Well I'll give a try this way, thank you

[HarelM]

I've looked at the code, and it is similar but not identical.
I'm not sure setting it to "internal" will actually solve the issue since you'll still be able to call this method.
Here's the relevant code inside style object:

maplibre-gl-js/src/style/style.ts

Lines 1178 to 1198 in 956485c

	setPaintProperty(layerId: string, name: string, value: any, options: StyleSetterOptions = {}) {
	this._checkLoaded();
	const layer = this.getLayer(layerId);
	if (!layer) {
	this.fire(new ErrorEvent(new Error(`Cannot style non-existing layer "${layerId}".`)));
	return;
	}
	if (deepEqual(layer.getPaintProperty(name), value)) return;
	const requiresRelayout = layer.setPaintProperty(name, value, options);
	if (requiresRelayout) {
	this._updateLayer(layer);
	}
	this._changed = true;
	this._updatedPaintProps[layerId] = true;
	// reset serialization field, to be populated only when needed
	this._serializedLayers = null;
	}