search

cubiq / add-to-homescreen

Add to home screen call-out for mobile devices
http://cubiq.org/add-to-home-screen
2.29k stars 747 forks source link

Bubble does not appear in correct location on landscape iPhone #276

Open s1h4d0w opened 6 years ago

s1h4d0w commented 6 years ago

The title says it all, when I open my website while holding my phone in landscape the bubble appears pointing at the bottom of the page, while the share icon is in the top right.

I'm not sure if this is something new in iOS and if the script hasn't been updated yet, but if so, could someone tell me how to add a new "location" for the bubble? I know some decent javascript but couldn't find the positions for the bubble in the scrips, but I'm sure I'm just missing it.

image-1

s1h4d0w commented 6 years ago

I kind of made a fix for this. Add the below code to the bottom of your css file, in de @media only screen and (orientation: landscape) part below the .ath-ios.ath-phone class.

Could someone make a pull request for this? I know very little about git.

.ath-ios11.ath-phone {
    left: auto;
    bottom: auto;
    right: 0.4em;
    top: 1.8em;
}
.ath-ios11.ath-phone:after {
    bottom: auto;
    top: -0.9em;
    left: 69%;
    z-index: 2147483641;
    box-shadow: none;
}