0

Isotope を使用していますが、奇妙な問題が発生しています。ブラウザによっては、最初の項目がリンクできません。これは、Mac 上の IE および Firefox のすべてのバージョンで発生しています。ページにフィルターがあり、クリックすると最初のアイテムがリンク可能になります。しかし、それは最初からではありません。

最初のアイテムに関する別の投稿を見ましたが、解決策は列幅に関係していました...しかし、私の場合、これはレスポンシブ サイトであるため、変更しています。

コードは次のとおりです。

var $container = $('#project-thumbs');          
var $default_filter = ".featured";                  

$container.isotope({
    animationEngine: 'best-available',
    filter: $default_filter,
    itemSelector : '.thumb',
    // disable resizing
    resizable: false
});

// update columnWidth on window resize
$(window).smartresize(function(){
  $container.isotope({

  });
});

何かご意見は？

更新 1: 実際には、すべてのブラウザー (PC の Firefox と Chrome も) にあるようです。

Firebug を使用して親指 (移動する要素) を "position:relative" に変更すると、最初のアイテムがリンク可能になることを発見しました。ただし、プラグインは「position:absolute」を追加しているため (おそらくそうする必要があります)、このスタイルを自分で設定すると上書きされます。しかし、それは手がかりになるのでしょうか？

更新 2: 近づいています。これは問題の一部だと思います。私がやっていることは、最初にすべてのアイテムを表示する代わりに、サブセットを表示していることです。HTML を見ると、リストの最初の項目は、私のサブセットの一部ではないため、実際には非表示になっています。ただし、「目に見える」最初のアイテムよりもリンクが優先されているようです.....

更新 3: 詳細... それまでの間、Android スマートフォンでこのページの一部のテキストがぼやけて見える理由を突き止めようとしていました。transformsEnabled: false を追加すると問題が解決することがわかりました。しかし、そこにそれがあると、この「リンクしない」問題がより頻繁に発生し、すべてのブラウザで発生しました。アイテムに正しい z-index などが与えられていないようです。

4

1 に答える 1