map gets flipped on x-axis running on Alpine with Chromium 80 using Xvfb

Description

For a project of mine I use some automated headless test-setup, where a build-server does end-to-end testing. After an upgrade to the latest chromium-version provided by Alpine-Linux edge a lot of tests broke, because the integrated deck.gl based map now is mirrored/flipped on x-axis.

Repro Steps

• you need to have a working Docker-setup locally/remote
• use the following as Dockerfile_311 content

FROM alpine:3.11
RUN apk add --no-cache \
    bash \
    nss \
    ttf-freefont \
    udev \
    mesa-gles \
    mesa-dev \
    mesa-osmesa \
    mesa-dri-swrast \
    xvfb \
    chromium \
    chromium-chromedriver

RUN mkdir -p /usr/lib/chromium/swiftshader/
RUN ln -s /usr/lib/libEGL.so /usr/lib/chromium/swiftshader/libEGL.so
RUN ln -s /usr/lib/libGLESv2.so.2 /usr/lib/chromium/swiftshader/libGLESv2.so
RUN ln -s /usr/lib/libOSMesa.so.8 /usr/lib/chromium/libosmesa.so

VOLUME /opt/export

WORKDIR /opt/export

• create a docker-image docker build -f ./Dockerfile_311 -t deckglbug:alpine311
• use the following as Dockerfile_edge content

FROM alpine:edge
RUN apk add --no-cache \
    bash \
    nss \
    ttf-freefont \
    udev \
    mesa-gles \
    mesa-dev \
    mesa-osmesa \
    mesa-dri-swrast \
    xvfb \
    chromium \
    chromium-chromedriver

RUN mkdir -p /usr/lib/chromium/swiftshader/
RUN ln -s /usr/lib/libEGL.so /usr/lib/chromium/swiftshader/libEGL.so
RUN ln -s /usr/lib/libGLESv2.so.2 /usr/lib/chromium/swiftshader/libGLESv2.so
RUN ln -s /usr/lib/libOSMesa.so.8 /usr/lib/chromium/libosmesa.so

VOLUME /opt/export

WORKDIR /opt/export

• create a docker-image docker build -f ./Dockerfile_edge -t deckglbug:alpineedge
• after all images were build, please create some export-folder to mount into the docker-containers later
• to verify it is working, create a temporary docker-container: docker run --rm -ti -v $(pwd)/export:/opt/export deckglbug:alpine311 /bin/bash
• (inside the container) please start a virtual framebuffer with WebGL-extension: Xvfb :1 -screen 0 1024x768x24 -ac +extension GLX +render -noreset &
• (inside the container)just to make sure, export the display export DISPLAY=":1"
• (inside the container) to (finally) create the first screenshot, please execute this command (the parameters are part of our test-setup): chromium-browser --no-sandbox --use-gl=swiftshader --ignore-gpu-blacklist --disable-extensions --ignore-certificate-errors --disable-dev-shm-usage --force-device-scale-factor=1 --headless --window-size=1920,1080 --disable-gpu --screenshot https://deck.gl/
• (inside the container) to access the screenshot, you need to give permissions (danger: unsecure permissions here): chmod 0666 screenshot.png
• (inside the container) now quit/stop the docker-container (should cleanup itself): exit
• check the created screenshot, it should look okay (please ignore the CSS-stuff, look at the map, it should be “normal”)
• to now see the bug appearing, create a different temporary docker-container: docker run --rm -ti -v $(pwd)/export:/opt/export deckglbug:alpineedge /bin/bash
• (inside the alpineedge container) please start a virtual framebuffer with WebGL-extension: Xvfb :1 -screen 0 1024x768x24 -ac +extension GLX +render -noreset &
• (inside the alpineedge container)just to make sure, export the display export DISPLAY=":1"
• (inside the alpineedge container) to (finally) create the second screenshot, please execute this command (the parameters are part of our test-setup): chromium-browser --no-sandbox --use-gl=swiftshader --ignore-gpu-blacklist --disable-extensions --ignore-certificate-errors --disable-dev-shm-usage --force-device-scale-factor=1 --headless --window-size=1920,1080 --disable-gpu --screenshot https://deck.gl/
• (inside the alpineedge container) to access the screenshot, you need to give permissions (danger: unsecure permissions here): chmod 0666 screenshot.png
• (inside the alpineedge container) now quit/stop the docker-container (should cleanup itself): exit
• check the created screenshot, it should look broken, the city is “upside down”

Environment:

• Framework: deck.gl 8.1.1 (the deck.gl website currently resolves to that)
• Browser Version (not working): Chromium 80.0.3987.132-r2
• Browser Version (working): Chromium 79.0.3945.130-r0
• OS (working): Alpine Linux 3.11
• OS (not working): Alpine Linux Edge

Logs

no relevant logs could be gathered

[1chandu]

Can you verify if actual rendering of deck.gl is fine (without your automated test setup), if so this could be an issue with how the test result is captured and compared?

[FibreFoX]

Short Update from my side: this seems to be “fixed” with Chromium 81 on Alpine … no idea why this happened, but are happy that this is working with swiftshader again.