Что вызывает эти проблемы рендеринга браузера? Z-индексные конфликты? Расположение правил?

Question

Что вызывает эти проблемы рендеринга браузера? Z-индексные конфликты? Расположение правил?

Я разрабатываю продукт, который будет использоваться многими клиентами вместе с нашим веб-приложением.

Быстрый фон:

Эти клиенты включили в их страницы виджет, который мы разработали.
Содержание виджета может быть изменено при помощи нашего приложения.
Идея позади этого продукта является bookmarklet, который мы предоставляем, который "выделит" наш виджет на их странице, превращая его в активируемую по щелчку ссылку, которая приводит к панели администрирования в нашем приложении.

Эффект "выделения" на самом деле включает некоторые z-индексные приемы; мы создаем полупрозрачный "фон"

всего несколько галочек ниже поддерживаемого максимумом z-индекса для отображения страницы серым; затем, мы корректируем z-индекс нашего виджета для нахождения к тому же полупрозрачного фона. Визуальный эффект должен навести справки как это:

http://skitch.com/troywarr/dtexp/example-good

Однако в Safari, а также Firefox при определенных условиях, там, кажется, своего рода артефакты рендеринга, которые препятствуют тому, чтобы это смотрело, как предназначено:

http://skitch.com/troywarr/dteqx/example-bad

Как можно сказать из снимка экрана, несколько элементов (наше изображение логотипа и </code> это содержит рекламу), все еще "ярки", как предназначено. Но, остальная часть виджета все еще заштриховывается.</p><p>Я вводил по абсолютному адресу вокруг с Firebug долгое время, чтобы попытаться достигнуть источник проблемы, но у меня не было открытий. Я надеюсь, что кто-то испытал подобную проблему или распознает "визуальную подпись" этого вида проблемы. Или, если Вы просто владеете мастерством JavaScript/jQuery и/или Firebug, я мог бы действительно использовать Вашу справку, пытающуюся выяснять, где этот подход терпит неудачу.</p><p>Я создал тест bookmarklet как живой пример. Видеть его:</p><ul><li>Откройте Firefox (разрабатываемая версия в настоящее время только работает там надежно).</li> <li>Перейдите к этой странице и перетащите ссылку туда на Вашу Панель Закладок: <a href="https://legkovopros.ru/go.php?url=http%3A%2F%2Fonespot.sfgate.com%2Fstatic%2Fism_testing%2Fcuration%2Fbookmarklet.html" rel="nofollow noreferrer" target="_parent">Пример Bookmarklet</a></li> <li>Перейдите к: <a href="https://legkovopros.ru/go.php?url=http%3A%2F%2Fwww.sfgate.com%2Fcgi-bin%2Farticle.cgi%3Ff%3D%2Fn%2Fa%2F2010%2F07%2F30%2Fsports%2Fs170637D86.DTL" rel="nofollow noreferrer" target="_parent">http://www.sfgate.com/cgi-bin/article.cgi?f=/n/a/2010/07/30/sports/s170637D86.DTL</a></li> <li>Нажмите bookmarklet, в то время как на той странице, и необходимо видеть то, к чему я обращаюсь.</li> </ul><p><strong>Заранее большое спасибо</strong> за любую справку! Этому экранировали меня.</p></p> </div> <div class="votes-question"> <div class="vote-count" itemprop="upvoteCount">1</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="tags"> <a href="/questions/tagged/javascript" class="tag" title="javascript" rel="tag">javascript</a> <a href="/questions/tagged/jquery" class="tag" title="jquery" rel="tag">jquery</a> <a href="/questions/tagged/css" class="tag" title="css" rel="tag">css</a> <a href="/questions/tagged/z-index" class="tag" title="z-index" rel="tag">z-index</a> </div> <div class="clearfix"></div> <div class="action-time"> задан Bungle <span title="10 August 2010 в 04:46 ">10 August 2010 в 04:46 </span> </div> <a class="s-link" href="/questions/298566/chto-vyzyvaet-eti-problemy-renderinga-brauzera-z-indeksnye-konflikty-raspolozhenie-pravil" title="поделиться">поделиться</a> </div> </div> <div style="height:100px;margin:10px 0px;" class=""> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block;height:100px" data-ad-client="ca-pub-2355906945027976" data-ad-slot="" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="answers" id="answers"> <h2 class="pull-left"><span itemprop="answerCount">1</span> ответ</h2> <div class="clearfix"></div> <div class="answer-pager"> <div class="pagination"> </div> </div> <div class="answer accepted" id="960133" itemscope="" itemtype="http://schema.org/Answer" itemprop="acceptedAnswer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p> Я собирался отказаться от этого, но думаю, что нашел проблему. Здесь происходит чертовски много элементов DOM, но, к счастью, проблема не в этом. </p> <p> Для iframe внутри DIV # onespot_nextclick требуется цвет фона #FFF. </p> <p> Все просто! </p> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">2</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="2 September 2019 в 22:18 ">2 September 2019 в 22:18 </span> </div> <a class="s-link" href="/questions/298566/chto-vyzyvaet-eti-problemy-renderinga-brauzera-z-indeksnye-konflikty-raspolozhenie-pravil#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-960133"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div style="margin-top: 20px;"> Другие вопросы по тегам: <div class="tags" style="display: inline-block; float: none;"> <a href="/questions/tagged/javascript" class="tag" title="javascript" rel="tag">javascript</a> <a href="/questions/tagged/jquery" class="tag" title="jquery" rel="tag">jquery</a> <a href="/questions/tagged/css" class="tag" title="css" rel="tag">css</a> <a href="/questions/tagged/z-index" class="tag" title="z-index" rel="tag">z-index</a> </div> <h3 class="m-t-20">Похожие вопросы:</h3> <div class="related-block"> <ul> <li><div class='votes-answer green'><span class='vote-count'>99</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/131610/skrytye-funkcii-javascript-zakrytyj" title="Скрытые функции JavaScript? [закрытый]">Скрытые функции JavaScript? [закрытый]</a> - 23 May 2017 02:10 </li> <li><div class='votes-answer green'><span class='vote-count'>70</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/82769/chto-takoe-javascript-versija-sleep" title="Что такое JavaScript-версия sleep ()?">Что такое JavaScript-версия sleep ()?</a> - 17 March 2018 18:15 </li> <li><div class='votes-answer green'><span class='vote-count'>61</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/90102/kak-ja-mogu-otformatirovat-chisla-v-vide-stroki-valjuty-v-javascript" title="Как я могу отформатировать числа в виде строки валюты в JavaScript?">Как я могу отформатировать числа в виде строки валюты в JavaScript?</a> - 26 May 2019 04:14 </li> <li><div class='votes-answer green'><span class='vote-count'>59</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/127174/chto-luchshij-sposob-sostoit-v-tom-chtoby-vynudit-sebja-k-osnovnomu-vi-zakrytyj" title="Что лучший способ состоит в том, чтобы вынудить себя к основному vi? [закрытый]">Что лучший способ состоит в том, чтобы вынудить себя к основному vi? [закрытый]</a> - 9 April 2009 03:44 </li> <li><div class='votes-answer green'><span class='vote-count'>55</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/87787/pochemu-by-ne-ispolzovat-tablicy-dlja-razmetki-v-html-zakryto" title="Почему бы не использовать таблицы для разметки в HTML? [закрыто]">Почему бы не использовать таблицы для разметки в HTML? [закрыто]</a> - 6 November 2018 00:07 </li> <li><div class='votes-answer green'><span class='vote-count'>44</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/82794/kakoj-sintaksis-javljaetsja-predpochtitelnym-dlja-opredelenija-perechislenij-v-javascript-zakryto" title="Какой синтаксис является предпочтительным для определения перечислений в JavaScript? [закрыто]">Какой синтаксис является предпочтительным для определения перечислений в JavaScript? [закрыто]</a> - 26 December 2018 06:38 </li> <li><div class='votes-answer green'><span class='vote-count'>40</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/89465/kak-luchshe-vsego-obnaruzhit-mobilnoe-ustrojstvo" title="Как лучше всего обнаружить мобильное устройство?">Как лучше всего обнаружить мобильное устройство?</a> - 24 April 2019 12:27 </li> </ul> </div> </div> </div> </div> </div> <aside class="sidebar"> <div class="awrap"> <script async src="https://yastatic.net/pcode-native/loaders/loader.js"></script> <script> (yaads = window.yaads || []).push({ id: "553274-2", render: "#id-553274-2" }); </script> <div id="id-553274-2"></div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-2355906945027976" data-ad-slot="8038370725"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </aside> </div> </div> <footer class="footer"> <div class="wrapper wrapper--sm"> <div class="footer-navs-col"> <div class="footer-nav footer-nav--menu"> <div class="footer-coryright">© 2017 - 2020 Вопросы и ответы по программированию</div> </div> <div class="footer-nav footer-nav--catalog"> </div> </div> <div class="footer-contacts-col"> <div class="soc-widget-col"> </div> </div> <div class="clearfix"></div> </div> </footer> </div> <script type="text/javascript" src="/js/ui/jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript" src="/js/ui/external/jquery.cookie.js"></script> <script type="text/javascript" src="/js/versions/menu.ru.u1607887878.js"></script> <script type="text/javascript" src="/js/jquery.fancybox.min.js"></script> <script type="text/javascript" src="/js/slick.min.js"></script> <script type="text/javascript" src="/js/jquery.maskedinput.min.js"></script> <script type="text/javascript" src="/js/versions/scripts.ru.u1607887878.js"></script>  <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; var z = null;m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(90030325, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/90030325" style="position:absolute; left:-9999px;" alt="" /></div></noscript>   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-123993370-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-123993370-1'); </script> </div> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebSite", "name": "Программирование - вопросы и ответы", "alternateName": "Программирование - вопросы и ответы", "url": "https://legkovopros.ru", "potentialAction": { "@type": "SearchAction", "target": "https://legkovopros.ru/search?search={search_term_string}", "query-input": "required name=search_term_string" } } { "@context": "https://schema.org", "@type": "Organization", "name": "Программирование - вопросы и ответы", "url": "https://legkovopros.ru", "logo": "https://legkovopros.ru/i/logo.png", "email": "info@legkovopros.ru", "telephone": "" } </script> </body> </html>