Databases
StackOverflow2013
Postsdbo
POCSS perspective not working in Internet Explorer 10 or Firefox
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS perspective not working in Internet Explorer 10 or Firefox
    primarykey
    data
    text
    <p>I've got a jQuery image scroller that simulates depth using the <code>perpective</code> and <code>transform: translateZ</code> CSS properties. It renders correctly in Chrome, but not in IE10 or Firefox.</p> <p>Here is the full project (click on the "Who's coming" menu link to see the image scroller): <a href="http://www.girlguiding.org.uk/test/biggig/index.html">http://www.girlguiding.org.uk/test/biggig/index.html</a> and here is a jsFiddle of the relevant code: <a href="http://jsfiddle.net/moosefetcher/rxCMr/28/">http://jsfiddle.net/moosefetcher/rxCMr/28/</a> (I'm not sure why, but stackoverflow is telling me I need to include code to link to jsFiddle, so here's the css)...</p> <pre><code>.scroller { position: relative; perspective: 150; -webkit-perspective: 150; -ms-perspective: 150; -moz-perspective: 150; } .artistBox { width: 228px; height: 268px; background-color: #000000; border-radius: 16px; position: absolute; overflow: hidden; z-index: 4; } .artistBox p { position: absolute; font-family:"Arial", sans-serif; color: white; font-size: 22px; } .artistBoxFront { z-index: 5; } .artistBoxNew { z-index: 3; opacity: 0; } .scrollerButton { position: absolute; top: 128px; width: 32px; height: 32px; border: 2px solid white; border-radius: 32px; background-color: #F49D19; box-shadow: 1px 1px 3px #555588; z-index: 6; } .scrollerButtonOver { background-color: #ffaa26; box-shadow: 2px 2px 3px #555588; } </code></pre> <p>Note that I have tried this both including AND excluding the <code>-ms-</code> prefix on the properties. (The current jsFiddle includes both, as well as <code>-webkit-</code> and <code>-moz-</code>). Anyone know why this might not be working in IE10? Cheers.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDavid Storey
    1. USmoosefetcher
    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. POCSS perspective not working in Internet Explorer 10 or Firefox
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POCSS perspective not working in Internet Explorer 10 or Firefox
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POCSS perspective not working in Internet Explorer 10 or Firefox
      1. This table or related slice is empty.
      1. VTUpMod
    1. CODon't know if this counts as a 'bump' but I've just found that IE10 renders the above 3D correctly in the 'quirks' mode option on developer tools. Anyone know why that might be? And if that's a helpful revelation at all?
      singulars
      1. POCSS perspective not working in Internet Explorer 10 or Firefox
      1. USmoosefetcher
    2. COIE10 in quirks mode is less standards-compliant. It may be allowing length values without a required unit of length (and assuming `px` by default).
      singulars
      1. POCSS perspective not working in Internet Explorer 10 or Firefox
      1. USMatt Coughlin
 

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