Scroll to top not working for safari - javascript

I am calling this javascript on page load
document.body.scrollTop = document.documentElement.scrollTop = 0;
I want html page starts from top when loaded, above javascript working fine for chrome, safari(macbook) but not working for safari on iphone,
can anybody suggest workaround in javascript only.

Posting this here for future visitors from Google.
This same error occured to me... The problem was just one CSS rule on body element.
overflow-x: hidden
If this CSS rule exists, remove it and scrollTop should work on mobile Safari.

As I tested this before, there are problems rendering on ios, but it also depends on the version of the OS for example, for an iPad pro, there is no problem! But on iPad air you there isn't much to do! so what you can do is to make your code compatible like:
document.scrollingElement.scrollTop
it should give you the right solution.

Related

scrollIntoView - how to make it work in iOS?

I'm loading my site into an iFrame that's on another site. I'd like to scroll to the top of an element within that iFrame. I'm using the Javascript code below:
document.getElementById("cart-wrapper").scrollIntoView({ behavior: 'auto' });
This works perfectly on desktop browsers, however it doesn't work at all on iOS mobile (I've tested Safari and Chrome). I've tried the smooth scroll polyfill (https://github.com/iamdustan/smoothscroll) but that doesn't work either (I've basically included <script type="text/javascript" src="/js/smoothscroll.js"></script>) )
Any solutions? Thanks
Few days back , I was also facing this issue. I fixed it with iScroll
I tried iScroll
I would be able to help you, if you need any

Gif animation freeze in mac safari

I am working on this site "http://tinyurl.com/joblnmd". On home page there'gif animation, I've used preload method to load images, its working on all major browsers expect safari on Mac.
Is this bug in safari or is there any hack?
New Post: I've looked at the site again and there doesn't seem to be any problems. The loading hourglass appears for a long time, but it eventually disappears and the main content of the page is visible. It might be best for your to provide a JSFiddle with just the area in question so that I, or someone else, can have a proper look and help you solve your problem.
Old Post: Maybe you need to update your browser. My Mac Safari appears to show everything perfectly. But I'll check again later tonight. The animation looks very nice.

Scroll bug in Chrome on Windows with Swipe-script

I am using this swipe script from iDangero but I have a small, everywhere it works perfect but only Chrome on windows is giving me a hard time. I already stated the issue at the owner of the script but he can't find a solution for the script at this point, maybe somebody here can help me.
Issue at GitHub:
https://github.com/nolimits4web/Swiper/issues/825
Script URL:
http://www.idangero.us/sliders/swiper/
URL:
http://testjevorm.nl/magazine
The Problem:
As soon as you go to the website you have the possibility to navigate to the next slide in two ways:
Click on the "UITGELICHT ARTIKEL"-block on the left.
Click on the arrow on the right
When you click on the block on the left it's not possible to scroll up and down on the next page (the scroll is somehow not working/disabled). The weird thing is that it "activates" when you click on the arrow in the menu right or hover over the social media icons on a page.
To show the issue I made a small video:
http://youtu.be/T8Bnz2fsvhU
(Yes, it's windows XP but the problem is also there in Windows Vista and Windows 7)
Part of the solution:
I found out that it has to do with the css I added myself:
body {width:100%; height:100%;}
html {width:100%; height:100%;}
When I remove this, the problem is solved but then all the pages have the same height as the longest page in the serie.
just tried what you told me to do on my Mac. It works fine on my Mac, but that's not what you said that didn't work, so I tried it on a Windows 8 Laptop.
Well... it works perfectly fine for me, with Chrome 35 on Windows 8. I assume that you either resolved the issue, or that there's something wrong with your Windows XP setup on mac.
Note: I highly doubt that there is a issue on your website, which will only "show up" in Windows 7 or below, as Windows has always been pretty much downwards compatible (and I'm sure they haven't changed anything about the scroll behavior).
Note 2: If you're still having the issue, it might be chrome on Windows XP. But as you want it to work on that as well (or your companies policy states so), then try this:
In your CSS, simply add overflow-x: scroll to your body.

Custom jQuery Slider does not work on iOS 7 Safari

I am working on a mobile site, my first, and I am facing strange problems. I have created a custom jQuery slider with left and right buttons. I have tried it on my Android's own browser, Firefox and Chrome for Android. It works fine, as it is supposed to.
When I gave the work to my client he said it doesn't work on iPhone for which it is originaly intended. I was confused as how this is possible, as it worked flawlessly on my Android. So I asked my friend for his iPhone 4S with iOS7 and opened up the site. To my surprise, the slider did not work. I took out my phone and opened it on my Firefox, it worked!
Why is this so? If it is working on Android, shouldn't it be working on iOS too? And how can I solve it?
Regards
I came to know why this happens. By default, iOS Safari doesn't allow everything to be "clickable". This means you need to make it cursor: pointer via CSS to make it "clickable".
I have got my answer from here: This link tell is why this happens. Read it!
Regards

Responsive Design Testing using IFrames facing problems with IE7 and IE8

I am trying to create a page which accepts URL of the website and shows me all the display sizes horizontally.
something like this : http://dfcb.github.com/Responsivator/
or
something like this : http://mattkersley.com/responsive/
In both the websites they are using iframes to load content in the specified width and then they are playing with width and height for different devices, it works well in all browsers apart from IE7 and IE8 I am wondering how to make it work on IE 7 and 8. There should be some way or other.
I read somewhere that http://www.ehow.com/how_8123203_use-iframes-ie8.html you can use P3P headers but I am not sure.
language is not an issue. but I just want it to be working on every browser.
I have developed a test page and kept it online : http://sentimentanalysis.comeze.com/responsiate/
if you see closely it works fine on chrome, ff, IE 9 but works pretty weird on IE7 and 8, how to make it look same? Is it possible?
Any pointers would be helpful.
Responsive design doesn't work in IE7 and 8.
Using methods like:
#media only screen and (max-width: 768px){}
do not working in IE7 or IE8, the only way around this is the client side Chrome frame.
Mobile headers (not responsive media queries)
You can send pretend mobile headers but that's about it. This would require a lot of messing about to fool the server into thinking you are on a mobile device, but it will take a lot of doing. Your server will have to request the page and all of it's assets (images, styles and scripts) and it won't show the true responsive design of the site: only the full mobile site if the target has one.

Categories