Databases
StackOverflow2013
Postsdbo
POWeird rendering bug in desktop webkit (safari/chrome) with absolutely positioned elements
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWeird rendering bug in desktop webkit (safari/chrome) with absolutely positioned elements
    primarykey
    data
    text
    <p>If you look at the video here: <a href="http://f.cl.ly/items/2g1a2B3G312D0x0G353W/Render%20Bug%202.mov" rel="noreferrer">http://f.cl.ly/items/2g1a2B3G312D0x0G353W/Render%20Bug%202.mov</a> - you will see the problem in action. Basically, I have something along the following:</p> <pre><code>&lt;section id="sidenav"&gt; &lt;h1&gt;TEXT HERE&lt;/h1&gt; &lt;ul&gt; &lt;li&gt;Tab One&lt;/li&gt; &lt;li&gt;Tab Two&lt;/li&gt; &lt;li&gt;Tab Three&lt;/li&gt; &lt;li&gt;Tab Four&lt;/li&gt; &lt;/ul&gt; &lt;div id="tab"&gt;&lt;/div&gt; &lt;/section&gt; </code></pre> <p>Sidenav is absolutely positioned, like this:</p> <pre><code>#sidenav { position: absolute; top: 200px; left: 0px; width: 770px; padding: 30px 0px 20px; background: rgba(255, 255, 255, 0.85); -webkit-transition: left 0.75s ease-in-out; -webkit-backface-visibility: hidden; z-index: 10; /* This fixed it. */ } #sidenav.hidden { left: -768px; } </code></pre> <p>I have the following jQuery:</p> <pre><code>$("#tab").click(function(){ $("#sidenav").toggleClass("hidden"); }); </code></pre> <p>However, the elements inside of the section aren't keeping up with the animation. Whenever I click, they either lag behind or don't move at all. However, they are just ghosts, I can't click them. When I bring the side nav back out, they usually catch up, but sometimes they are broken until I hover over the <code>&lt;li&gt;</code>'s.</p> <p>Keep in mind, this only happens in Safari/Chrome on the desktop. Safari on the iPad and Firefox on the desktop are working fine.</p> <p>Thanks! Andrew</p> <hr> <p><strong>EDIT WITH FIX:</strong></p> <p>So apparently adding z-index: 10 (or any z-index) to the sidenav element fixed the problem. Some people were asking for the entirety of my css, so I edited the post to contain it. I'm not sure exactly why z-index fixed this, and I'd love to know why. I'm still offering my bounty to whomever can explain that. Thanks!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USandrewpthorp
    1. USandrewpthorp
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POWeird rendering bug in desktop webkit (safari/chrome) with absolutely positioned elements
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POWeird rendering bug in desktop webkit (safari/chrome) with absolutely positioned elements
      1. This table or related slice is empty.
      1. VTDownMod
    3. VO
      singulars
      1. POWeird rendering bug in desktop webkit (safari/chrome) with absolutely positioned elements
      1. USandrewpthorp
      1. VTBountyStart
    1. COhave you tried doing the sliding using jquery instead of css3? this could be css3 support bug kind of thing. If you have not tried that I would suggest to go that route for now
      singulars
      1. POWeird rendering bug in desktop webkit (safari/chrome) with absolutely positioned elements
      1. USHuangism
    2. COI want to avoid jQuery for this, because CSS3 animations are sprinkled throughout and are much more efficient.
      singulars
      1. POWeird rendering bug in desktop webkit (safari/chrome) with absolutely positioned elements
      1. USandrewpthorp
    3. COwell efficient as it might be, you still got this problem. can you give the code/css for the arrows? maybe you need to put the animation on them as well if they are positioned differently (not static)
      singulars
      1. POWeird rendering bug in desktop webkit (safari/chrome) with absolutely positioned elements
      1. USHuangism
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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