Page doesn't scroll in Chrome on iOS - html

I have this really weird problem. Our Tumblr blog home page http://blog.wigo.us doesn't scroll in Chrome on iOS. It scrolls just fine in any browser on desktop, any browser on Android and in Safari on iOS. But the latest version of Chrome in iOS8 just refuses to scroll the page.
The effect is basically like somebody put overflow:hidden on body element and gave it width=100%, height=100%. I looked through CSS of the theme and didn't find anything suspicious. I even run iPhone emulation in Google Developer tools - everything works just fine.
It would be awesome if someone had a similar problem and could point me in the right direction.

Related

Brave Browser / Bug with scrolling - Return to top of the page

there is a bug regarding scrolling when opening https://www.streampicker.de/ with the Brave Browser. After scrolling down a bit, the website jumps back to the top.
Video to show it in action: https://www.dropbox.com/s/37suikq9awxix7c/StreamPicker%20-%20Brave%20Browser%20-%20Scrolling.mov?dl=0
It works perfectly with all other browsers including Chrome. Brave is on the latest version with no other external extensions installed.
Any ideas what could cause that problem and how to fix it - in the browser or in the code of the website itself?
Thanks!

Differences between Desktop Wordpress dev console and iPhone Safari browser window

I'm having a problem with Wordpress. I've styled my website in the customize console in Wordpress on my Desktop, but when I open it with my iPhone (can't confirm if this is happening with other mobile browsers) there is this gray border on the outside of the block. Here's a screenshot:
https://imgur.com/a/A3nEgTy
I can't find any information about this or find anything about other people having this issue. Is there some way to access the source code or Inspect tool in mobile Safari? Just trying to make the block fill the screen.

Webpage loses functionality on Safari but is fine on Chrome

Can someone help me understand why certain things aren't working on safari but do on chrome?
These are apparent on both mobile and desktop.
So here is the website I'm currently working on: http://stage.coefficientlabs.com.s3.amazonaws.com/index.html
Problems:
1. The hero video plays smoothly on Chrome but not on Safari.
2. (main issue) Once the "Get Started" button is clicked, a modal appears. All the styling and content seemingly hidden(?) on Safari but not on Chrome.
Any idea what is going on here?
Thank you!
Turns out the issue was "overflow: hidden". I think is a known difference for Safari in general.

Is position fixed buggy in firefox as seen on bootstrap's official page?

Recently I have been reading bootstrap from their official page and noticed a bug in firefox browser. When I visited http://getbootstrap.com/getting-started/ and scrolled to the very bottom then clicking on back to top link took the page to its top but it didn't remove the fixed position of the right side menu.
Is this a bug in firefox browser? Does firefox sometimes not remove position fixed? I am using Firefox 49.0.1 on windows 10.
I've used both Firefox and Firefox Developer Edition (last version) to enter that page and the fixed position looks well for me. Maybe your browser needs an update. What version do you have? I have Firefox 49.0.2 and Firefox Developer Edition 51.0a2.

elements display incorrectly on tablet browsers

I'm currently working on one of my first two projects and you can tell that I'm still at the beginning of my youtube-tutorials-&-SO-powered learning journey:
our neighbor's skin & beauty spa
Please don't be too harsh on my code :D I've hand-written everything from scratch in a little editor.
In short, everything seems to work A-OK on desktop computers (I tested FF and Chrome), but on the iPad and other tablets I'm experiencing nasty bugs - I'm having major trouble with two issues:
the Google Maps iframe is always visible (overlaps other
sections) on tablets even if the corresponding section isn't clicked
on in the menu, and I have no idea why! It seems that the
visibility:hidden on a position-fixed element isn't interpreted
correctly?
:focus works on the image gallery 'sneak peak', but
in the services section, the 4 sub-content areas are inaccessible.
(Unrelated?) When the page loads on my iPad (mini) the #logo_box
div appears at page load, but turns semi-transparent the very
instant as the map iframe appears.
EFFORT1: I removed the Google maps iframe-containing 'content' container altogether, and suddenly the :hover on the other content sections stopped working as well. This might be an indicator that something is 'linked' in a way that's not right...
EFFORT2: I assumed that the < label> is the culprit, but I can't pinpoint it. I tried this suggested solution, but it's for IOS4 (2011), and as Rob Fletcher commented last Feb., it doesn't work on IOS7.
EFFORT3: I feel that the .content div's {visibility:hidden/visible;} is causing trouble in the android mobile browser: input:checked hides instead of reveals the particular section while all others show.
Btw, how do I friggin' trouble-shoot tablets? I don't have any dev tool on ipad & android browsers.
Help is much appreciated!!
On iPad, you can go into the Settings App, then go Safari -> Advanced -> Web Inspector.
Then plug it into your Mac via USB and open Desktop Safari on the Mac. If you haven't already enabled the Develop menu, go Safari -> Preferences -> Advanced -> Show Develop Menu.
Then when you open a web page in Safari on the iPad, you can connect to it via the Develop menu on your Mac's Safari and use the web inspector.
If you're using Chrome on Android you can use remote debugging https://developer.chrome.com/devtools/docs/remote-debugging
Weinre provides similar functionality across more platforms (including Android native browser), but is a bit more involved to set up.