Streaming live at 10am (PST)

Google maps issue on iphone 6/7


#1

Hi,

Having issue with Google maps on iPhone 6/7 with chrome. I tried with iPhone plus and no problems so far.

What do I need to do to prevent this? Hope someone can help :slight_smile:

Video of the issue: https://cl.ly/5f018f243c7c

This is the read only link https://preview.webflow.com/preview/clayton-shagal-belux?utm_source=clayton-shagal-belux&preview=7f301564d1d60d8333ab48bc264c3fc9

This is the online version: https://www.claytonshagal-belux.be/


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hi @palombokevin

Thanks for posting about this.

It looks like you are sizing the dimensions of this element using Viewport height (vh). The nature of safari on mobile though, is to show / hide the top and bottom browser options as you scroll — this causes the viewport height to grow and shrink and any element sized with vh will change as a result.

I recommend using a fixed value for mobile, or maybe relying on VW even on the height :slight_smile:

​Please let me know if this is helpful!


#3

Hi @Brando,

Thanks for your help. I tried several things (%, VW, px) but this shrink is still happening :-(. Can you precisely tell me what you suggest for height and width? Do I need to add padding or margin too?

Why only map is causing this problem? other images or displaying fine…

Thanks


#4

Hi @palombokevin

I did some more testing on this end.

I set up the maps dimensions like this:

And when testing with iPhone 7 & 8 I see this: https://cl.ly/1b86cd834e9a

I hope this helps!


#5

Thanks @Brando! It works fine on Safari but have you tried Chrome?


#6

Hi @palombokevin

I noticed there’s also 100vh set on the parent row here

If you change the row to height: auto, it should help resolve the issue in Chrome as well.


#7

You’re the man @Brando

Thousand thanks for your help!