Я разрабатываю продукт, который будет использоваться рядом клиентов вместе с нашим веб-приложением.
Быстрый фон:
- Эти клиенты включили в свои страницы разработанный нами виджет.
- Содержание виджета можно изменить с помощью нашего приложения.
- Идея этого продукта - предоставляемый нами букмарклет, который «выделит» наш виджет на их странице, превратив его в интерактивную ссылку, которая ведет к панели администрирования в нашем приложении.
Эффект «подсветки» включает в себя некоторые трюки с z-индексами; мы создаем полупрозрачный «фон» <div> всего на несколько тиков ниже максимально поддерживаемого z-индекса, чтобы затемнить страницу; затем мы настраиваем z-индекс нашего виджета так, чтобы он располагался поверх этого полупрозрачного фона. Визуальный эффект должен выглядеть примерно так:
http://skitch.com/troywarr/dtexp/example-good
Однако в Safari, а также в Firefox при определенных условиях, похоже, существуют какие-то артефакты рендеринга, которые мешают этому выглядеть как задумано:
http://skitch.com/troywarr/dteqx/example-bad
Как вы можете видеть из скриншота, пара элементов (наше изображение логотипа и <iframe>, который содержит рекламу) все еще "яркие", как и предполагалось. Но остальная часть виджета все еще затенена.
Я довольно долго возился с Firebug, чтобы попытаться найти источник проблемы, но у меня не было никаких откровений. Я надеюсь, что кто-то сталкивался с подобной проблемой или распознал «визуальную подпись» такого рода проблемы. Или, если вы просто являетесь знатоком JavaScript / jQuery и / или Firebug, я мог бы действительно использовать вашу помощь, пытаясь выяснить, в чем суть этого подхода.
Я создал тестовый букмарклет в качестве живого примера. Чтобы увидеть это, пожалуйста:
Спасибо очень заранее за любую помощь! Это сбило меня с толку.