Атрибут непрозрачности отображается только в контейнере Docker.

У меня есть приложение Laravel, использующее тему Metronic. В рамках темы у них есть собственная реализация BlockUI. Я использую это в течение многих лет без проблем. Когда приложение работает на «голом железе», все работает так, как ожидалось.

Однако, когда я делаю Dockerize приложение, все работает нормально, но я замечаю, что к элементам BlockUI применяется дополнительный атрибут opacity. И не только это, но и на всех страницах, кроме одной.

Вот как это должно выглядеть (голая версия):

BlockUI работает правильно

Как видите, он затемняет DataTable и выводит окно Please wait... при выполнении AJAX-запроса.

Вот та же самая страница, но внутри контейнера Docker:

BlockUI с добавлением таинственного атрибута 'opacity'

В этом случае поле «Подождите...» едва видно, потому что ему присвоена непрозрачность около 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

person Sturm    schedule 10.03.2021    source источник
comment
Разместите свой файл докеры на вопрос   -  person Tarun Lalwani    schedule 10.03.2021
comment
@TarunLalwani Dockerfile опубликован.   -  person Sturm    schedule 11.03.2021
comment
Надеюсь, вы протестировали обе версии в режиме инкогнито, чтобы исключить какое-либо странное кеширование?   -  person Tarun Lalwani    schedule 11.03.2021
comment
Если бы я этого не делал, я бы не был большим веб-разработчиком. Кэширование не проблема.   -  person Sturm    schedule 11.03.2021
comment
Ржунимагу. Извините, иногда вам нужно спросить то, что вы должны спросить. Это самое странное, что я видел, я пока не могу сопоставить, что может быть не так   -  person Tarun Lalwani    schedule 11.03.2021
comment
Как вы запускаете контейнер? Пожалуйста, добавьте либо команду, либо файл docker-compose.yml.   -  person anemyte    schedule 16.03.2021
comment
Уточнение вашего термина использования «голого железа», приложение dockerzied также работает на «голом железе» на том же ядре. Разница только в том, что это ядро ​​доступно только для чтения. В ваших файлах должны быть какие-то изменения (какая-то разница в версии?), Или он каким-то образом обнаруживает динамически отличающийся контекст и настраивает параметры.   -  person Niklas    schedule 16.03.2021
comment
В этом контексте, когда я использую термин «голое железо», я имею в виду версию без докеризации. т. е. работает в моей системе разработки с установленным стеком AMP (в частности, Laragon для Apache и PHP). При докеризации, как видно из опубликованного мной Dockerfile, я собираю его из официального образа php:apache. Несмотря на это, он работает и на моем компьютере для разработчиков. Я не вижу, где разные ядра, не могли бы вы уточнить?   -  person Sturm    schedule 16.03.2021
comment
В вашей среде laragon возникает ли эта проблема, если вы запускаете производство npm вместо использования ресурсов разработки?   -  person Msencenb    schedule 16.03.2021
comment
Это хорошая мысль, @Msencenb, но я только что попробовал, и у меня все еще получается правильная непрозрачность. Кстати, при попытке проверить, имеют ли значение эти три команды ремесленника на чистом ПК для разработчиков, я обнаружил, что запуск php artisan config:cache, похоже, портит приложение, поэтому мне нужно config:clear его. (Тем не менее, похоже, это не проблема в Dockerfile.)   -  person Sturm    schedule 16.03.2021
comment
Извините, я имел в виду не разницу в ядрах, а возможную разницу в версиях ваших зависимостей/пакетов, которая может вызвать это. Вы на 100 % уверены, что программное обеспечение в контейнере и в вашей системе разработки идентично?   -  person Niklas    schedule 17.03.2021
comment
Что касается пакетов/библиотек, обе версии используют одни и те же файлы package-lock.json и composer.lock. Однако при проверке phpinfo() есть отличия. например, dev использует PHP на базе Windows (от Laragon) v7.4.16. Контейнер использует PHP версии 7.4.12 на базе Linux. Когда контейнер находится на моей локальной машине, он работает с WSL2 Ubuntu 20.04. На нашем действующем сервере также установлена ​​Ubuntu 20.04.   -  person Sturm    schedule 17.03.2021
comment
Может ли быть разница между v7.4.16 и v7.4.12? Не можете ли вы создать контейнер, идентичный вашей машине разработки? Или обновить свою машину для разработки? В нынешнем виде вы говорите что-то вроде того, что мое приложение ведет себя по-разному, когда я запускаю его на разных версиях платформы, на что мы можем только ответить, мэм. Если это те же версии, то нам есть что обсудить... Кроме того, можете ли вы запустить env в своем контейнере и на своей машине разработки и подтвердить различия.   -  person Software Engineer    schedule 22.03.2021
comment
@Sturm, вы знаете, откуда берется это значение непрозрачности? Например. какой css?   -  person naimdjon    schedule 22.03.2021
comment
Сначала я бы попробовал дважды проверить, ведет ли себя так же в других браузерах, чтобы убедиться, что это не побочный эффект некоторых расширений из вашего текущего браузера. Я думаю, что ваша докеризованная версия по какой-то причине может переопределить непрозрачность по умолчанию, может быть, искать часть этой строки в вашем контейнере докеров? $.blockUI.defaults.overlayCSS.opacity stackoverflow.com/questions/6636157/   -  person runwuf    schedule 22.03.2021
comment
@SoftwareEngineer Я понимаю, что вы имеете в виду о двух разных версиях PHP, но A) Если вы увидите мой Dockerfile, вы заметите, что я использую последнюю версию PHP для контейнера. т. е. 7.4.12 является последней версией, даже если 7.4.16 вышла. Я ничего не могу сделать, кроме как, возможно, понизить мою версию PHP для разработчиков только потому, что образы Docker отстают. И B) Второстепенный выпуск между версиями, вызывающий эту проблему? Я мог понять, был ли это основной выпуск (7.5) или обновление основной версии (8.0), но не это. Возможный? Конечно. Вероятно? Я сомневаюсь в этом.   -  person Sturm    schedule 22.03.2021
comment
@SoftwareEngineer Между двумя средами существует такая огромная разница, что сравнивать их почти бесполезно. Кроме того, существует так много переменных среды, что я понятия не имею, что они делают, и не могу предположить, вызывает ли какая-либо из них эту проблему. И опять же, я считаю маловероятным, что причиной может быть переменная среды. Но, эй, я могу ошибаться. Посмотрите: diffchecker.com/JVPD6Bdu   -  person Sturm    schedule 22.03.2021
comment
@naimdjon На моем втором снимке экрана (i.stack.imgur.com/OCadC.png ), вы можете видеть, что атрибут непрозрачности применяется к тегу стиля элемента, что предполагает, что это делается программно, а не предопределено где-то в файле CSS. Единственное, это не исходит из кода, который я написал.   -  person Sturm    schedule 22.03.2021
comment
@runwuf Я проверил Firefox и Edge и получил тот же результат. Я не уверен, как проверить все в контейнере докера для этой строки.   -  person Sturm    schedule 22.03.2021
comment
@Sturm, если у вас где-то есть корневая проверка этого приложения на локальном / голом железе, если вы выполните поиск blockUI.defaults.overlayCSS.opacity, вы увидите где-нибудь в коде, который устанавливает это?   -  person runwuf    schedule 22.03.2021
comment
Самое простое решение: предположим, что docker прав, а ваша личная машина — нет. Затем исправьте проблему в докере. Если это работает в докере, это работает и в продукте. лит. никого не волнует, если это не работает на вашей машине. (Я имею в виду это красиво ;).   -  person Software Engineer    schedule 22.03.2021


Ответы (1)


Здесь много движущихся частей, поэтому несложно точно определить, откуда именно применяется изменение в вашем элементе. Одним из возможных способов выяснить это может быть использование 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"] });
person naimdjon    schedule 22.03.2021
comment
Спасибо за предложение, @naimdjon. У меня работает наблюдатель, но все, что он может мне сказать, это то, что стиль opacity является частью узла, когда он добавляется в DOM, но только в контейнере Docker. Это не часть узла при работе вне контейнера. - person Sturm; 06.04.2021