5

Unfortunately the bottom: 0 doesn't show the element because Smart App Banner of the Apple Store app taking top space out of <body>

Is there any solution to fix it or to detect Smart App Banner open or not to add CSS solution with adding more unit like bottom: 0 to bottom: 3rem

enter image description here

enter image description here

Mo.
  • 26,306
  • 36
  • 159
  • 225
  • is it absolute or fixed? – Pete Jul 02 '18 at 13:23
  • @Pete it is in `position:fixed` – Mo. Jul 02 '18 at 14:01
  • 1
    hmmm then I would expect it to work unless rubbish apple and safari actually pushes the viewport down - what sort of developer would do that, useless (just as bad as ie developers!) – Pete Jul 02 '18 at 14:03
  • 1
    @Pete I felt the same – Mo. Jul 02 '18 at 14:03
  • 1
    hey @Mo. did you get a solution for this, where the content with position fixed is not pushed down, because of smart app banner? – whyAto8 Jun 04 '20 at 08:48
  • @whyAto8 `position: absolute` is the only solution otherwise you may not able to use properly because iOS did this feature with purpose :-( https://nicolas-hoizey.com/articles/2015/02/18/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers/ – Mo. Jun 04 '20 at 09:21
  • 1
    @Mo. in that case how do you make your button or an element sticky, so that it always remains at bottom, even if user scrolls. – whyAto8 Jun 04 '20 at 10:42
  • @whyAto8 dropped the plan :-( – Mo. Jun 04 '20 at 21:25
  • 1
    @Mo. oh, thats bad. So, is that like really a genuine issue in safari, that if the app banner shows, everything will be pushed down, no matter what and there is no workaround for this? I am wondering, if a lot of people wouldn't have encountered this. – whyAto8 Jun 05 '20 at 04:17
  • @whyAto8 The basic to drop the plan was user needs to click twice for the click function. To show button it may work with `transform: translateY(100%);` – Mo. Jun 05 '20 at 13:48
  • 1
    @Mo. Sorry, i didnt get that. Are you saying adding that transform will make the button visible again, even if the app banner is coming on the top and page content is pushed down below. – whyAto8 Jun 05 '20 at 14:27
  • @whyAto8 It is possible to make visible but a small bottom may not be clickable at the first time. User needs to double tap for that. Hope you get me :-) – Mo. Jun 05 '20 at 14:30
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/215375/discussion-between-whyato8-and-mo). – whyAto8 Jun 05 '20 at 14:31

0 Answers0