Блог

Мои знания javascript (и почти все мои навыки программирования) ужасны, но я работаю над приложением, созданным на Symfony с использованием пакета администрирования Sonata.

Моя проблема в том, что я только что обнаружил ошибку, которая, похоже, влияет только на настольные браузеры.

У меня есть поле, в котором отображается изображение, и цвета изображения изменяются в соответствии с выбором пользователя.

Это отлично работает на мобильных устройствах прямо сейчас и всегда работало (последняя проверка неделю назад), но по какой-то причине перестало работать на настольных компьютерах.

Работает на: iPhone (Safari и Chrome) и iPad (Safar и Chrome)

Не работает: Macbook (Safari и Chrome) и Microsoft (Chrome, Edge и FF)

Вот код, отвечающий за изменение цветов на изображениях:

 <script>
    $(document).ready(function () {
        var logos = {};
        {% for image in images %}
            var image{{ image.id }} = '{{ image.content|raw }}';
            logos['logo-'   {{image.id}}] = image{{ image.id }};
        {% endfor %}
        $('.target').parent('div').append("<div id='image_preview'></div>");
        var container = $("#image_preview");
        {# apply selected colors to image preview #}
        function applyColors() {
            $('.defaul_image_color').each(function () {
                if ($(this).val() != 'FFFFFF') {
                    $('path.'   $(this).data('param')).css('fill', $(this).val())
                }
            })
        }
        {# display image and apply colors #}
        function displayImage() {
            if ($('.target option:selected').val()) {
                container.html(eval('image' $('.target option:selected').val()));
                applyColors();
            } else {
                container.html('');
            }
        }
        displayImage();

        {# trigger on color or image change #}
        $('.defaul_image_color, .target').on('change', function () {
            displayImage();
        });

        $('#select2-results-5').bind('DOMSubtreeModified', function () {
           $('#select2-results-5 li .select2-result-label').each(function () {
               if (logos[$(this).text()] != undefined amp;amp; !$(this).has('svg').length) {
                   $(this).prepend('<span class="svg_list">'   logos[$(this).text()]   '</span>');
               }
           })
        });
    });
</script>
 

Я не пытаюсь быть ленивым, но я не знаю, с чего начать устранение этой проблемы, поэтому вы можете войти в мою тестовую учетную запись, чтобы проверить проблему из первых рук:

http://adminstage.3w1.website/admin/admin-customer-theme/167/edit пользователь: topsellerz1234@gmail.com pw: 1234

Проблема связана с отображением выбранного изображения логотипа. Настройки-> Тема-> редактировать тему -> вкладка логотип

Спасибо за любую помощь в этом.

Я не уверен, так ли это, но попробуйте использовать rgb() формат цвета вместо hexa.

Решением для устранения этой проблемы было добавление значения заполнения с помощью ‘#’. Я не уверен, почему мой код годами работал без него. Если кто-нибудь может объяснить, почему он перестал работать и почему он работал без него на мобильных устройствах, я отмечу это как ответ.