Stack overflow on iphone

overflow-x: auto on iPhone is not scrolling

I have an iframe inside a div, which looks like:

I want the entry form to be scrollable on the x-axis, so that it can be used in mobile phones. This is working correctly on desktop and other phones, such as Android, but when using Safari in iOS the scroll is not present or works randomly.

Any possible fixes for this? Is this an iOS bug?

3 Answers 3

I saw in your sources that you use bootstrap so why you don’t just adapt the with to be all inside the screen without any scrolling (horizontal scrolling on cellphone is not really user-friendly for me).

If you really want to use scrolling, I recommend you to use:

Have you tried to use !important ?

I just went to this website on my iPhone, and the form scrolled easily on the X-Axis using iOS 8.1. I also went to your site using iOS 6.1.6 on a 4th generation iPod touch. On this older version of Safari, the web form was still able to load properly and scroll easily on the X-axis.

If you are having issues with your webpage, it could be a bug specific to your version of iOS or Safari. But I have not had any issues, the scrolling is smooth and works consistently. Hopefully this outside test was of help to you. Good luck and cheers!

You may want to make the form ‘flexible’ instead. Try using a percentage width in your CSS. For example width:10%;

Not the answer you’re looking for? Browse other questions tagged html ios css iphone or ask your own question.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.12.9.40950

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Stack Overflow AR 4+

Barbara Herold

Для iPad

Снимки экрана

Описание

Die Augmented Reality App STACK OVERFLOW AR verwandelt die Brutalismus-Architektur des Forums an der Münchner Freiheit in stürzende Klang-Skulpturen und Stapel. Die Besucher starten unmittelbar in der Aufprallzone und können über Distanz/Nähe und Richtung zur Skulptur Sound-Sets, Ablauf und Geschwindigkeit der Stapelung generieren. Eröffnung am 4. Juli 2019 mit LiveAct von Kim_Twiddle.

AR Art, Lat. 48.162740, Lon. 11.586790, Münchner Freiheit 7, 80802 München/Munich

USE HEADPHONES // open air + daylight // SPECIAL FEATURE: explore 4 sound sectors

Instruktion:
Gehe zur Münchner Freiheit 7, Forum, 80802 München (M-WLAN Hotspot).
App installieren und öffnen.
Erlaube GPS location services & AR camera.
Gehe zu X (Startpunkt der App), Forum, Münchner Freiheit.
Beste Sicht bei ca. 20-30 m Abstand.
KOPFHÖRER benutzen!

Fehlerbehebung / Troubleshooting:
Kein GPS Signal (go outside for location detection). Bitte ins Freie gehen. Ort wechseln ggfs. App neu starten.
Fliegende Türme. Die App verwendet GPS Signal und Bilderkennung zur Platzierung der Stapel. Wenn die Stapel wandern oder wegfliegen, den Boden des Startpunktes scannen und ggfs. App neu starten.

Credits:
Konzept & Kreation Barbara Herold, Code Frank Groh, Sounddesign Kim Ramona Ranalter (Kim_Twiddle), Sound Mastering Simon Kummer
STACK OVERFLOW © Barbara Herold, 2019, aus der Projektreihe: Frequenzen. Akustische Dimensionen der Stadt, gefördert durch das Kulturreferat der LH München.

Источник

Does overflow:hidden applied to work on iPhone Safari?

Does overflow:hidden applied to work on iPhone Safari? It seems not. I can’t create a wrapper on the whole website to achieve that.

Do you know the solution?

Example: I have a long page, and simply I want to hide the content that goes underneath the «fold», and it should work on iPhone/iPad.

18 Answers 18

I had a similar issue and found that applying overflow: hidden; to both html and body solved my problem.

For iOS 9, you may need to use this instead: (Thanks chaenu!)

Some solutions listed here had some strange glitches when stretching the elastic scrolling. To fix that I used:

After many days trying, I found this solution that worked for me:

Combining the answers and comments here and this similar question here worked for me.

So posting as a whole answer.

Here’s how you need to put a wrapper div around your site content, just inside the tag.

Create the wrapper class as below.

I also got the idea from this answer here.

And this answer here also has got some food for thought. Something that probably will work equally good in both desktops and devices.

Its working in Safari browser.

Wasn’t enough, i’t didn’t work on iOS on Safari. I also had to add:

To make it work good. Works fine now 🙂

I’ve worked with and

When popup opens .

gets a height of 100% and an overflow:hidden

I use JS/jQuery to get the actual scrollposition of the page and store the value as data-attribut to body

Then i scroll to the scrollposition in the .wrapper DIV (not in window)

Here is my solution:

It works well on both sides . desktop & mobile (iOS).

Источник

disabling horizontal scroll on an iPhone website

I am developing an iPhone version of a WordPress driven website and I was wondering if there’s any method to disable horizontal scrolling when the website is open in Safari for iPhone. Right now, I am half way through the development and just to check if I could disable horizontal scrolling, I have hidden any of the elements which were exceeding the screen width but still I can scroll horizontally to the right. I tried putting the following code inside the tags in the but that didn’t help:

I have put the following code inside the head file to echo if the user is viewing the website from an iPhone but it only disables user-pinching i.e. you cannot zoom in and zoom out by pinching the screen.

I am currently using an iPhone 4 to check the website and the website can be accessed by going to this link: http://ignoremusic.com. Looking forward to a solution from you guys, thanks.

SOLUTION: As suggested by @Riskbreaker, there were a few elements which were exceeding the width of

312px which is why I could still swipe to the left and after adjusting the width of all such elements, I disabled horizontal swipe. One thing which I learned is that hiding overflow-x doesn’t help in the case of an iPhone/iPad, you have to reduce the width of all the elements to that of the width of your screen otherwise you’ll still be able to swipe horizontally.

Источник

Stack Overflow AR 4+

Barbara Herold

Для iPad

Снимки экрана

Описание

Die Augmented Reality App STACK OVERFLOW AR verwandelt die Brutalismus-Architektur des Forums an der Münchner Freiheit in stürzende Klang-Skulpturen und Stapel. Die Besucher starten unmittelbar in der Aufprallzone und können über Distanz/Nähe und Richtung zur Skulptur Sound-Sets, Ablauf und Geschwindigkeit der Stapelung generieren. Eröffnung am 4. Juli 2019 mit LiveAct von Kim_Twiddle.

AR Art, Lat. 48.162740, Lon. 11.586790, Münchner Freiheit 7, 80802 München/Munich

USE HEADPHONES // open air + daylight // SPECIAL FEATURE: explore 4 sound sectors

Instruktion:
Gehe zur Münchner Freiheit 7, Forum, 80802 München (M-WLAN Hotspot).
App installieren und öffnen.
Erlaube GPS location services & AR camera.
Gehe zu X (Startpunkt der App), Forum, Münchner Freiheit.
Beste Sicht bei ca. 20-30 m Abstand.
KOPFHÖRER benutzen!

Fehlerbehebung / Troubleshooting:
Kein GPS Signal (go outside for location detection). Bitte ins Freie gehen. Ort wechseln ggfs. App neu starten.
Fliegende Türme. Die App verwendet GPS Signal und Bilderkennung zur Platzierung der Stapel. Wenn die Stapel wandern oder wegfliegen, den Boden des Startpunktes scannen und ggfs. App neu starten.

Credits:
Konzept & Kreation Barbara Herold, Code Frank Groh, Sounddesign Kim Ramona Ranalter (Kim_Twiddle), Sound Mastering Simon Kummer
STACK OVERFLOW © Barbara Herold, 2019, aus der Projektreihe: Frequenzen. Akustische Dimensionen der Stadt, gefördert durch das Kulturreferat der LH München.

Источник