We Keep Coding

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

Scroll to top not working for safari

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.

PDF inside iFrame not working on iOS

I have been trying to display PDF inside iFrame, it works well for all other browsers and platforms but not working with iOS. When I tried to access in chrome/Safari in iPhone/iPad, it shows the first page BUT does not allow to scroll down the PDF. And when it comes to HTML inside iFrame, it works perfectly, per my observation it looks like issue is with PDF inside iFrame on iOS. Tried all the links provided on various websites, overflow-auto, webkit scrolling, scrolling only y axis, position absolute/relative increasing the height which results in white pages and all other possible solutions, but no luck yet. The language of implementation is ASP.NET-C# where I am setting the iFrame source dynamically. Below is the source through which I am trying to achieve above task.
<div id="wrapper" class="Sales-container container">
<iframe runat="server" id="Contents" class="myiframe" scrolling="no" width="100%" height="100%" frameborder="0" />
</div>
.Sales-container{position:absolute !important;width:100%}
.container{margin-right:auto;margin-left:auto;padding-left:7px;padding-right:8px}
.myiframe{z-index:0;white-space:nowrap}
Any help would be much appreciated.
Thanks.

If you don't need https, you can use the google docs viewer
make the src http://docs.google.com/gview?url=YOURADDRESSHERE&embedded=true
If that won't work for you, I'm currently looking into pdf.js

Vimeo fullscreen : video appears under the website's elements

I'm having a really strange issue with vimeo & html5 fullscreen player.
I have this code in my template :
<iframe src="http://player.vimeo.com/video/91593219/?autoplay=1" width="100%" height="615" frameborder="0" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"></iframe>
The iframe loads fine, but when I click "fullscreen", the browser goes in fullscreen mode with the video appearing UNDER the site (I have relative and absolute divs visible while watching the video).
You can experiment this bug here : http://webrelais.net/pingpong/projet/proxipolis
Has anyone experienced this issue ?
Thanks a lot for your help !

I solved the problem by disabling animate.css style on the element which included my iframe.
Nevertheless, I tried with z-index modifying, jQuery for changing styles but nothing worked, the only one solution was removing Animate CSS class.

Was the same bug in Safari (13.0.4). In my case parent div of an iframe had will-change property. Fullscreen works correct after I've removed it.

A quick look shows that it is related to CSS or Javascript for the element - since removing the id for that element makes fullscreen video work in Chrome at least.
Solve the problem by isolating CSS and Javascript that you use for that element and you should be able to find what causes it.

animation-fill-mode: both; in parent elements seems to cause this issue with fullscreen videos.

iFrame doesn't work in Chrome (works fine in FF, IE and Safari)

I have an iFrame that works fine in FF, IE and Safari. In Chrome, the iFrame doesn't work. It's not even visible.
Link: http://kamersoptwitter.nl/link/Amsterdam/16985-huigenbos
The iFrame loads with a width and height of 100%, once loaded it's resized using javascript to a specific width and height (to match with the bar on top of the screen).
The code is use for the iFrame:
<iframe id="kamers-iframe" frameborder="0" noresize="noresize" src="<?=URL?>"></iframe>
Any idea how to fix this?
Thanks!

you may post your complete code to help you better.
I have tested your code with different url,iframe works well in Chrome ,That may be your code problem.