Databases
StackOverflow2013
Postsdbo
POStrange behaviour of "position: relative" when zooming. What's happening?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POStrange behaviour of "position: relative" when zooming. What's happening?
    primarykey
    data
    text
    <p><strong>The Fiddle</strong>: <a href="http://jsfiddle.net/4WFrJ/" rel="nofollow noreferrer">http://jsfiddle.net/4WFrJ/</a></p> <p><strong>My Problem</strong>: I can't wrap my head around the behaviour of this setup. When I zoom in, the images tend to move faster, but when I zoom out, they don't move at all. Sometimes they just stop at 9.xxxxxx, even though I told them to move only by one pixel. Can you explain this?</p> <p>My browser is Chrome.</p> <p><strong>My Aim</strong>: achieve a fluid motion with the images disappearing when out of bounds of the parent element, whatever the magnification percentage.</p> <p>I am in search of the basic rules, that govern these strange processes, from which I hope to learn new things.</p> <p><strong>The Code</strong>:</p> <p><em>HTML</em>:</p> <pre><code>&lt;div id = "presentation"&gt; &lt;ul&gt; &lt;li class = "pres-item"&gt; &lt;img class = "pres-image" src = "../img/presentation/image1.jpg"&gt; &lt;/li&gt; &lt;li class = "pres-item"&gt; &lt;img class = "pres-image" src = "../img/presentation/image2.jpg"&gt; &lt;/li&gt; &lt;li class = "pres-item"&gt; &lt;img class = "pres-image" src = "../img/presentation/image3.jpg"&gt; &lt;/li&gt; &lt;li class = "pres-item"&gt; &lt;img class = "pres-image" src = "../img/presentation/image4.jpg"&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p><em>CSS</em>:</p> <pre><code>html, body { margin: 0; } #presentation { padding: 10px; width: 900px; margin: 50px auto; overflow: hidden; } #presentation ul { list-style-type: none; margin: 0; } #presentation ul li { display: inline-block; } .pres-item { height: 150px; width: auto; position: relative; left: 0; } .pres-image { width: inherit; height: inherit; } </code></pre> <p><em>JS</em> (with jQuery):</p> <pre><code>$(document).ready(function(){ var presentation = $('#presentation'); var interval = setInterval(function() { console.log('intervaling'); $('.pres-item').css('left', '+=1'); }, 60); }); </code></pre> <p><strong>The Image</strong>:</p> <p><img src="https://i.stack.imgur.com/S6AZU.png" alt="The fixed position at 90% zoom"></p> <p><strong>The Thanks</strong>:</p> <p>THANKS PEOPLE (in advance)</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USRasteril
    1. USRasteril
    plurals
    1. This table or related slice is empty.
    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
    1. VO
      singulars
      1. POStrange behaviour of "position: relative" when zooming. What's happening?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POStrange behaviour of "position: relative" when zooming. What's happening?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COin what browser?
      singulars
      1. POStrange behaviour of "position: relative" when zooming. What's happening?
      1. USPopnoodles
    2. COMy browser is Google Chrome. Oh, it's doing that only in chrome, isn't it. That's even weirder than I thought.
      singulars
      1. POStrange behaviour of "position: relative" when zooming. What's happening?
      1. USRasteril
    3. COThey seem to move slower when zoomed out, but isn't that natural? If they move 4px per "tick," say, and you zoom out to 25%, then they will only appear to move at 1px per "tick," since 4 viewport pixels are being condensed into one screen pixel (or maybe we're just not seeing the same effect).
      singulars
      1. POStrange behaviour of "position: relative" when zooming. What's happening?
      1. USDagg Nabbit
 

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