stylebotというgoogle chrome extensionをつかって、ニコニコ動画のマイページのCSSをいじっているのですが、ウォッチリストをコンパクトにしてスクロールできるようにするためにoverflowを使うと、何故か画面外の<img>が表示されなくて困っています。


何か解決策、または発生する原因を知っている方がいたら教えて下さい。
使用しているコードはコチラです。
http://stylebot.me/styles/993
エクステンションはコチラです。
https://chrome.google.com/webstore/detail/oiaejidbmkiecgbjeifoejpgmdaleoha

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2012/01/24 03:05:04

回答0件)

回答はまだありません

  • id:rouge_2008
    overflowの指定ではなく、「display:none;」で表示なしにしているのが原因のようです。
    CSSの冒頭の以下の記述を表示したくないセレクターのみの指定にしてみてください。

    /* mypage header */

    #header .headerIcon, #header #logo5th, #header #web_pc_top, #accountFace, .toPageTop, .cmnHeading, #myContHead, .hasSubNav, .content_312, #PAGEFOOTER, #ichiba_placeholder, .ads_728_google, #PAGEHEADER .ads_468, .userName a, #footerWrap, #nicoads, #ranking_sub , .mb8p4, #web_pc_footer_box, #ranking_main #head, .liveProgramHead, #PAGEHEADER > table > tbody > tr > td:nth-child(1), #PAGEHEADER > table > tbody > tr > td:nth-child(2) {
    display: none;
    }

    ※表示されないというimgは、上記セレクタで指定した要素の中にある為、表示されていないようです。
  • id:rouge_2008
    画面外を勘違いしました・・・
    overflowでスクロールしないと表示されない領域の事ですね。
    一旦ブラウザ画面の方を下までスクロールすると、一応すぐ表示されるようですが・・・
    ※特定のブラウザでたまに良くある挙動のようですが、原因は不明です。(^^;
  • id:bluesura
    rouge_2008さん、回答ありがとうございます。
    説明がわかりづらくて申し訳ないです。スクショとかのせとくべきでしたね。

    特定のブラウザによくある挙動ですか・・・。それなら仕方がないですね。
    あと、overflowの領域を下までスクロールしても表示はされませんでした。
    ページが固定されているのでブラウザのスクロールバーは使えません。

    もうひとつ、申し訳ないのですが、
    どんな形でもいいのでそれに関しての記事のURLがあれば教えていただけないでしょうか。
    なければないで、返答いただければありがたいです。
  • id:bluesura
    *追記
    スクロールすれば治ると言われたので、
    関係のない別の要素をわざと大きくして、ブラウザー本体をスクロールしてみたら
    次々と画像要素が表示されていくさまが見れました。
    そういう処理がされているから表示されないのね。
  • id:rouge_2008
    紛らわしい表現ですみません。
    「たまに」良くある挙動です・・・(何回か見かけたことがあったので。)
    自分の経験で知っているだけですので、申し訳ありませんが参考URLはありません。
    結構前のことなので、解決したかどうかも忘れてしまいましたが、一つのケースは、imgで読み込んでいる画像ではなくて、背景画像が途中で途切れるという物だったと思います。(条件は分かりませんが、スクロールなしで見えている領域しか描画されないという現象です。)

    シンプルなHTMLとCSSで試してみましたが、テキスト・画像等すべて表示されましたので、overflow自体が原因ではないようです。
    他のCSSとの組み合わせが原因のようですので、このままもう少し待つと有効な回答がつくかもしれません。
  • id:rouge_2008
    > 次々と画像要素が表示されていくさまが見れました。

    overflow領域を下までスクロールした状態で少し待っても表示されず、ブラウザ本体のスクロールですぐ表示されたので、読み込み途中という事でもないようです。
    すぐには無理ですが、ニコニコ動画のマイページのCSSを確認に使用したHTMLに適用して、再度確認してみようと思います。
    ローカルにある普通の画像なので、同じ環境でテストする事はできませんが・・・
  • id:bluesura
    *追記2
    lazyimage class(スクロールで領域に入ってきた画像を表示する?)がどうも原因ぽいです。
    かつ、スクロールイベントが多分、window.onscrollにしかついてないので
    ulでoverflow:scroll;をつけて動かしてもscrollイベントが発生せずに表示されないのかもしれないです。

    原因を調べてくれていた、rouge_2008さんには本当にご迷惑おかけして申し訳なかったです。
  • id:rouge_2008
    > lazyimage class(スクロールで領域に入ってきた画像を表示する?)がどうも原因ぽいです。

    原因が分かったんですね。
    全然気がつきませんでした・・・(^^;

    まだほとんど調べていませんし、時間がある時に試しているだけですので、私の方は大丈夫です。
    こちらこそお力になれずにすみません。
    bluesuraさんが自分でも調べてくださっていて良かったです。
  • id:bluesura
    >こちらこそお力になれずにすみません。
    いやいや、rouge_2008さんの領域とスクロールのアドバイスがあったから辿りつけたんですよ!

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません