Databases
StackOverflow2013
Postsdbo
POpicturefill.js issue with z-index
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POpicturefill.js issue with z-index
    text
    copied!<p>I'm using picturefill to do responsive images. The issue that I am having is that I am calling picturefill(); method on the success callback of an ajax call. When the dynamically loads, picturefill is called. </p> <p>This works fine but the issue is that the picturefill'd picture covers up all of the elements that are overlayed on top of it for about 1 second. this causes an uncomfortable effect because the overlayed elements shows up abruptly. so the sequence is that we see the elements, elements dissapear, and then elements reappear from under the picturefill'd picture.</p> <p>has anyone else run into this problem and does anyone have any suggestions on how I can deal with it? I already tried changing the z-index of the picture fill'd pictures to z-index:1 and everything else to z-index: 200 but still no luck.</p> <p>Adding some code:</p> <pre><code> &lt;!-- Begin centerimage Container --&gt; </code></pre> <p></p> <pre><code> &lt;!-- Begin rightcaption --&gt; &lt;div class="rightcaption"&gt; OVERLAID CAPTION &lt;/div&gt; &lt;!-- End rightcaption --&gt; &lt;!-- Begin flip-container --&gt; &lt;div class= "flip-container"&gt; &lt;div class= "flipper"&gt; &lt;div class= "front"&gt; &lt;div class="main-pic-wrap" id="bloop"&gt; &lt;div data-picture data-alt="name" data-class="relative_image"&gt; &lt;div data-src=source&gt; &lt;/div&gt; &lt;div data-src=img2%&gt; data-media="(min-width: 480px)"&gt;&lt;/div&gt; &lt;div data-src=img3%&gt; data-media="(min-width: 767px)"&gt;&lt;/div&gt; &lt;!--[if (lt IE 9) &amp; (!IEMobile)]&gt; &lt;div data-src="medium.jpg"&gt;&lt;/div&gt; &lt;![endif]--&gt; &lt;!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --&gt; &lt;noscript&gt; &lt;img src=img3 alt="Image of Activity"&gt; &lt;/noscript&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class = "back"&gt; &lt;div id="map"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- End flipper --&gt; &lt;/div&gt; &lt;!-- End flip-container container --&gt; &lt;div id="moreShowHideGroup"&gt; &lt;div id="mapShowHide" class="icon-globe"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p> </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload