Opacity attribute only appears in Docker container

Question

I have a Laravel app that is using the Metronic theme. As a part of the theme, they have their own implementation of BlockUI. I've been using this for years with no trouble. When the app runs bare-metal, everything works as expected.

However, when I Dockerize the app, everything works fine, but I notice that an extra opacity attribute is being applied to the BlockUI element(s). Not only that, but it's doing it on all of the pages except one.

Here is how it should appear (bare-metal version):

As you can see, it darkens the DataTable and puts up a "Please wait..." box when an AJAX request is made.

Now here's the exact same page, but within a Docker container:

In this case, the "Please wait..." box is only barely visible because it's been given an opacity of about 0.1 and you cannot even tell that the DataTable has been darkened any at all.

How can I track down where this is coming from? It only happens when the exact same app (no changes) is run from within a Docker container and on all pages but one. (The "Orders by Print Type" page works fine. No clue why.)

Here's the Dockerfile, in case it might have something to do with this:

FROM php:apache

# Arguments defined in docker-compose.yml
ARG user
ARG uid

# Set our application folder as an environment variable
ENV APP_HOME /var/www/html

# Set working directory
WORKDIR $APP_HOME

# Use the default production configuration
RUN mv "$PHP_INI_DIR/php.ini-production" "$PHP_INI_DIR/php.ini"

# Copy over project-specific PHP settings
COPY ./docker-config/php/local.ini /usr/local/etc/php/conf.d/local.ini

# Get NodeJS
RUN curl -sL https://deb.nodesource.com/setup_14.x | bash -

# Install all the system dependencies and enable PHP modules 
RUN apt-get update && apt-get install -y \
      libicu-dev \
      libpq-dev \
      libmcrypt-dev \
      libpng-dev \
      libjpeg62-turbo-dev \
      libfreetype6-dev \
      git \
      libzip-dev \
      zip \
      unzip \
      nodejs \
      build-essential \
    && rm -r /var/lib/apt/lists/* \
    && docker-php-ext-configure pdo_mysql \
      --with-pdo-mysql=mysqlnd \
    && docker-php-ext-configure gd \
      --enable-gd \
      --with-freetype=/usr/include/ \
      --with-jpeg=/usr/include/ \
    && docker-php-ext-install \
      intl \
      pcntl \
      pdo_mysql \
      pdo_pgsql \
      pgsql \
      zip \
      opcache \
      gd \
    && pecl install -o -f redis \
    && rm -rf /tmp/pear \
    && docker-php-ext-enable redis

# Install Composer
RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/bin/ --filename=composer


# Change uid and gid of apache to docker user uid/gid
RUN usermod -u $uid $user && groupmod -g $uid $user

# Copy existing application directory + permissions
COPY --chown=www-data:www-data . $APP_HOME

# Change the web_root to laravel /var/www/html/public folder
RUN sed -i -e "s/html/html\/public/g" /etc/apache2/sites-enabled/000-default.conf

# Fix the .env file for production.
RUN mv "$APP_HOME/.env.production" "$APP_HOME/.env"

# Enable apache module rewrite
RUN a2enmod rewrite

# Install dependencies
RUN npm install

# Compile CSS & JS
RUN npm run production

# Install all PHP dependencies
RUN composer install --no-interaction

# Create mountpoints and link them.
RUN ln -s /mnt/orders /var/www/html/public/orders

# Run artisan commands to set things up properly
RUN php artisan key:generate
RUN php artisan storage:link

# Optimization for production
RUN composer install --optimize-autoloader --no-dev
RUN php artisan config:cache
RUN php artisan route:cache
RUN php artisan view:cache

# Set the maintainer info metadata
LABEL maintainer="Sturm <email_hidden>"

And here is the relevant portion of the docker-compose.yml file:

  # Laravel app (Apache & PHP services with Laravel)
  schedule:
    build:
      args:
        user: www-data
        uid: 1000
      context: .
      dockerfile: Dockerfile
    image: "sturmb/sky-schedule:2021.6.1"
    container_name: schedule
    restart: unless-stopped
    working_dir: /var/www/html
    volumes:
      - /mnt/jobs_main:/mnt/jobs_main
      - /mnt/orders:/mnt/orders
    depends_on:
      - schedule-db
    ports:
      - "8081:80"
      - "4543:443"
    networks:
      - web

Answer 1

There are many moving parts here, therefore it is not trivial to pinpoint exactly where the change in your element is being applied from. One possible way to find this out could be to use MutationObserver and watch for changes being made to the DOM tree. Something along the line of:

var mutationObserver = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log("Detected change: ", mutation);
    });    
});

var blockElement = document.getElementsByClassName("blockUI blockMsg blockElement");
mutationObserver.observe(blockElement, { attributes : true, attributeFilter : ["style"] });