Opacity 属性只出现在 Docker 容器中

如何解决Opacity 属性只出现在 Docker 容器中

我有一个使用 Metronic 主题的 Laravel 应用程序。作为主题的一部分，他们有自己的 BlockUI 实现。我多年来一直在使用它，没有遇到任何问题。当应用在裸机上运行时，一切都按预期运行。

但是，当我 Dockerize 应用程序时，一切正常，但我注意到一个额外的 opacity 属性被应用于 BlockUI 元素。不仅如此，它还在所有页面上执行此操作，除了一个。

它应该是这样的（裸机版本）：

如您所见，当发出 AJAX 请求时，它会使 DataTable 变暗并显示“请稍候...”框。

现在是完全相同的页面，但在 Docker 容器中：

在这种情况下，“请稍候...”框几乎不可见，因为它的不透明度约为 0.1，您甚至无法判断 DataTable 是否已变暗。

我怎样才能找到它的来源？仅当完全相同的应用程序（无更改）在 Docker 容器内和除一个页面之外的所有页面上运行时才会发生。 （“按打印类型排序”页面工作正常。不知道为什么。）

这是 Dockerfile，以防万一它与此有关：

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>"

这是 docker-compose.yml 文件的相关部分：

  # 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

解决方法

这里有许多活动部分，因此要准确指出元素更改的应用位置并非易事。找出这一点的一种可能方法是使用 MutationObserver 并观察对 DOM 树所做的更改。类似的东西：

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"] });