Databases
StackOverflow2013
Postsdbo
POcss transitions blocking scrolling of window
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POcss transitions blocking scrolling of window
    text
    copied!<p>In firefox, I get a delay and it makes scrolling the window (with trackpad on mac) virtually impossible to do it smoothly.</p> <p><a href="http://wishd.me/" rel="nofollow">http://wishd.me/</a></p> <p>Not sure what I'm doing wrong, if anything, or is this just an unintended side-effect of doing a transition on a hover.</p> <pre><code>.list &gt; li &gt; div { border: 1px solid #09c; border-radius: 5px; margin-bottom: 20px; padding: 10px 20px; border-bottom: 7px solid #39c; position: relative; background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 66%, #fbfbfb 80%, #fafafa 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(66%, #fcfcfc), color-stop(80%, #fbfbfb), color-stop(100%, #fafafa)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%, #fcfcfc 66%, #fbfbfb 80%, #fafafa 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%, #fcfcfc 66%, #fbfbfb 80%, #fafafa 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%, #fcfcfc 66%, #fbfbfb 80%, #fafafa 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%, #fcfcfc 66%, #fbfbfb 80%, #fafafa 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fafafa', GradientType=0); /* IE6-9 */ /*box-shadow: 1px 5px 15px #f0f0f0; */ box-shadow: 1px 1px 2px #fff inset, 1px 5px 15px #f0f0f0; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; margin: 0 10px 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .list &gt; li:hover &gt; div { box-shadow: 1px 1px 2px #fff inset, 0px 5px 20px #ddd; background: #fff; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; margin-top: -1px; margin-bottom: 21px; } </code></pre>
 

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