[ 解決済 ] safariでフローティングバナーが表示されない問題について

VWSとは フォーラム Katawara [ 解決済 ] safariでフローティングバナーが表示されない問題について

[ 解決済 ] safariでフローティングバナーが表示されない問題について

  • このトピックには3件の返信、2人の参加者があり、最後に憲兒岩室により1週前に更新されました。
4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • 投稿者
    投稿
  • #103381

    憲兒岩室
    参加者

    ■ WordPress のバージョン
    6.6.2

    ■ テーマ・プラグインは全て最新版で確認してください。
    確認しました。

    ■ テーマの種類
    Katawara

    ■ テーマのバージョン
    1.26.6

    ■ 期待する動作
    Katawaraで制作したサイトの右上にフローティングバナーを設置したい。

    ■ 自分で試した事
    z-indexを99999など。下記実際のバナーまわりのcss記述です。

    .fixed_banner {
    position: fixed; /* 追従させる為にfixedの値を記述 */
    z-index: 99999; transform: translateZ(1px); /* 他の要素の下に隠れないように前面配置 */
    top: 100px; /* 上から100pxのところにバナーを配置 */
    right: 0px; /* 右から0pxのところにバナーを配置 */
    background-color:transparent;
    border-color:transparent;
    }

    .fixed_banner_pc {
    border-radius: 10px 0px 0px 10px;
    transition : 0.5s;
    }

    .fixed_banner_pc:hover {
    opacity: 0.6;
    }

    ■ 症状が発生するブラウザ
    Safari

    ■ 実際の症状
    連続の質問で失礼します。

    Katawaraで制作したサイトの右上あたりにフローティングバナーを設置したのですが、Safariで閲覧すると表示されなくなってしまいます。Chrome、Microsoft Edge、Firefoxでは正常に表示されています。

    サイドメニューがある左上にバナーを持ってくると、Safariでも表示されています。スクロースする右側のメインカラムではz-indexを99999などにしても、どうしても下になってしまうようです。
    どうぞご教示ください。
    よろしくお願いいたします。

    #103382

    憲兒岩室
    参加者

    追記です。

    z-index: 99999;
    のうしろにある
    transform: translateZ(1px);
    は消している状態です。

    よろしくお願いいたします。

    #103457

    うなこ
    モデレーター

    お世話になっております。

    フローティングバナーの提案になります。
    VK Blocks Pro に「固定表示ブロック」がありますので、そちらを設置して、中にはお好みのブロックを入れて追従バナーを設置するのはいかがでしょうか。

    こちらですとブロックで設置できますので、cssを書くよりも簡単に設置できるのではないかと思いまして、提案させていただきました。

    #103832

    憲兒岩室
    参加者

    「固定表示ブロック」で解決できました!!
    確かにcss書くより簡単でした。。
    大変助かりました!!
    ありがとうございましたm(_ _)m

4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • このトピックに返信するにはログインが必要です。