Problems in firefox and safari

miguelperez commented 13 years ago

I have a working site, which shows one slider.

It works perfect on chrome but in safari and firefox it seems very slow and sluggish.

The average image size is less than 40KB.

The transitions are slow as in (frame by frame), the timer it is also slow.

This is the markup generated after calling the slider

<div class="orbit-wrapper" style="width: 270px; height: 420px;">
  <div id="featured" class="orbit" style="width: 270px; height: 420px;">

    <img width="270" height="420" title="60% Off at Brenen's Cafe" src="/system/pictures/19/original/brennens_5.jpg?1302020741" data-caption="#cap0" alt="Brennens_5" style="z-index: 1; display: block; left: 0px;">

    <img width="270" height="420" title="60% Off at Brenen's Cafe" src="/system/pictures/20/original/brennens_4.jpg?1302020741" data-caption="#cap1" alt="Brennens_4" style="display: block; left: 0px; z-index: 1;">

    <img width="270" height="420" title="60% Off at Brenen's Cafe" src="/system/pictures/21/original/brennens_7.jpg?1302020741" data-caption="#cap2" alt="Brennens_7" style="display: block; left: 0px; z-index: 1;">

    <img width="270" height="420" title="60% Off at Brenen's Cafe" src="/system/pictures/22/original/brennens_1.jpg?1302020741" data-caption="#cap3" alt="Brennens_1" style="display: block; left: 0px; z-index: 3;">

  </div>

  <div class="timer">
    <span class="mask move">
      <span class="rotator move" style="-moz-transform: rotate(358deg);">
      </span>
    </span>
    <span class="pause">
    </span>
  </div>

  <div class="orbit-caption">
  </div>

  <div class="slider-nav">
    <span class="right">Right</span>
    <span class="left">Left</span>
  </div>
  <ul class="orbit-bullets">
    <li class="">1</li>
    <li class="">2</li>
    <li class="">3</li>
    <li class="active">4</li>
  </ul>
</div>

Any thoughts?

cpres commented 13 years ago

I'm actually seeing this same issue in Firefox. It doesn't seem to care about the advance speed at all. and you can barely even see the transition happen. Chrome works perfectly though on both ends.

cpres commented 13 years ago

Found what slowed down the advancespeed "-moz-transform": degreeCSS,

If Mozilla is dealing with any kind of slowing at all that transformation slows down the entire slideshow.

mkelly12 commented 13 years ago

I'm really interested in tracking this one down, what version of these browsers and what operation system are you seeing this issue on?

As a workaround, if you display: none; the timer in your CSS then the transformations will not be run.

.orbit-wrapper .timer { display: none; }

howster commented 12 years ago

Orbit totally sucks in Firefox 8 unfortunately when nested in a foundations.css colums div. 20 second or so transitions. Standalone is fine but in busy site it lags and functionality hangs

mkelly12 commented 12 years ago

Howster: Are you still seeing this in FF9? The FF upgrade path is so aggressive now that I think it's ok so long as it works in the latest version. It looked fine on FF9 for me but maybe you are looking a more complex page then what I tested on.

howster commented 12 years ago

Hi, my biggest concern is using the foundation css and orbit together for client websites. It is very promising but I'd need it to work in all fairly modern browsers eg IE7+ and FF6+. It avoids clients complaining etc... In a perfect world we'd all use the latest browsers but some clients still even use IE6 (ridiculous I know) particularly in big institutions that fear change. If I add swfobject and/or fancybox/colorbox js to the page everything just hangs in IE8 i.e. 20-30 second page load speed. Zurb and Orbit are v promising but very tempermental. Hope this helps. Keep up the good work! Browser compatability is the key requirement for me anyway. Thanks

zurb / orbit

Problems in firefox and safari #12