ApplePay button stays on top of a popup window

  • Resolved paulwessiack

    (@paulwessiack)


    4 years, 3 months ago

    If you go to the product detail page:
    https://www.magped.com/shop/magped-sport2/?lang=en
    and click the green button “ADD TO CART” when using a Safari browser with Apple Pay enabled, the black “Buy with ApplePay” button will stay on top and therefore overlaps the opened pop-window which shows the cross selling articles.

    The ApplePay button should have a z-index value of 0 …

    Thanks for your support

    :: Paul

    • This topic was modified 4 years, 3 months ago by paulwessiack.
    • This topic was modified 4 years, 3 months ago by paulwessiack.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support tijosh

    (@tijosh)

    Hi there @paulwessiack,

    I’m not able to reproduce the problem. See the screenshot here.

    Is there a similar screenshot you can share?

    Thread Starter paulwessiack

    (@paulwessiack)

    Hi Thanks for your replay!

    Please press the button “ADD TO CART” not the “Pay with Apple Pay” button.
    This will open a different pop up window.

    greetings

    :: Paul

    Hi @paulwessiack – this one has been a bit tough to figure out, since neither the Apple Pay button or the add to cart popup are responding to most positioning or z-index (depth) styling.

    Ultimately, I was able to get the desired results by changing the positioning of the add to cart container from position: absolute; to position: fixed;:

    div.pp_pic_holder { position: fixed; }

    I actually think this looks a bit better, as scrolling the page keeps the add to cart popup at the center of the page consistently.

    If that doesn’t work at first, you can try adding an !important tag, though I tend to try not to if possible:

    div.pp_pic_holder { position: fixed!important; }

    You’ll want to try these CSS snippets by going to: WP Dashboard > Appearance > Customize > ‘Additional CSS’ – then you can simply copy/paste one at a time until the results look good on your end.

    Let me know if you have any issues!

    Thread Starter paulwessiack

    (@paulwessiack)

    many thanks!

    div.pp_pic_holder { position: fixed; }

    does the job perfect!!

    greetings

    :: Paul

    Thanks for letting us know, @paulwessiack! ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘ApplePay button stays on top of a popup window’ is closed to new replies.