Take the sample history example from Extjs framework. It works fine in Safari.
Now add the following lines to the history.html page
<iframe src='http://google.com'></iframe>
Now test the same example in Mac Safari. It just doesn't work. Any solution to this problem?
I'm having a similar problem. For some reason my back button isn't controlling the hidden iframe. It's updating the main URL in IE.
Related
Before posting this I passed one full day to understand this bug but without any result.
Here is the link to web application that Im developing : https://yd-chauffeurs.vercel.app/
This BUG is happening ONLY in SAFARI. Please use SAFARI to reproduce. In other browser it works perfectly.
Open Home page and click on CONTACT after the contact page is opened click on ABOUT (A PROPOS in french) or GALLERY. You will see that SAFARI doesn't scroll to that section which is marked with id.
When you are on Home page and you click , all Links work perfectly and they scroll to necessary id.
But when you are on another page like Contact or FAQ, Safari doesn't scroll to About or Gallery.
I can't figure out why.
Thank you for your answer.
Today I finally managed to resolve the issue. I resolved this problem by giving min-height to service section.
The problem was that Safari was not charging all DOM elements so it was starting to scroll to the section but when DOM was fully loaded the scroll was pushed upper. So I gave min height to service section and now it works perfectly.
Thank you again.
I checked in Safari Version 14.1 (Desktop) but cannot reproduce the problem.
I'm creating a third-party app, which is loaded through an iframe.
The iframe creates a draggable element in side it.
On first page load (before scrolling the page), the draggable (slider) works fine.
But after scrolling the page behind the iframe, it's hard to get the slider to slide again.
(Note that this is a mobile issue, safari on iOS especially, but also chrome on iOS)
In the following demo I have used the GSAP Draggable library with react to create the draggable element but have also tried to code it in plain react with no luck.
Here is a demo: https://unfjl.csb.app/
I have tried a lot of different things (css, touchevents etc), but cannot get it to work...
What could cause this behaviour?
Update (no iframe example)
Demo no iframe: https://p5cu9.csb.app/
Same example with slider as above, but in this example the draggable is rendered directly in the DOM and not in an iframe. The problem still occurs. I suspect it has something to do with the fixed css position of the slider...
This is gonna sound really strange, but a bug in iOS Safari causes that and the only way I know of to get around it (which I discovered today via Googling) is to add a "touchstart" listener to the of the top-level page (not the iframe)!
document.getElementsByTagName("body")[0].addEventListener("touchstart",function(){});
That isn't something I can add to Draggable because it wouldn't be able to access the parent document (outside the iframe) to add that properly (security restrictions in the browser).
You could also add a touchforcechange listener that prevents the default behavior (I'll be adding that to Draggable itself too):
yourDraggableElement.addEventListener("touchforcechange", function(event) {
event.preventDefault();
});
Browser bugs are fun, aren't they?! ;)
(Originally answered in the GreenSock forums at https://greensock.com/forums/topic/21450-draggable-in-iframe-on-mobile-is-buggy/?tab=comments#comment-101225)
I have angular UI bootstrap's carousel directive implemented on my site. Everything is working fine and suddenly I noticed that whenever I browse to other sites, leaving my site open in one tab and come back to my site again, the pager and carousel controls stop working. It's strange but I have set my carousel to auto rotate and it also stops.
The carousel won't work until I refresh. First, I thought I had some bugs in my code, but when I tried their own slider from the https://angular-ui.github.io/bootstrap/#/carousel website, also shows the same behavior.
Any thoughts or fixes on this?
For the code, please visit this link :
https://angular-ui.github.io/bootstrap/#/carousel
And scroll down to the Carousel section and click Edit in Plunker.
Thankyou!
This is a known issue and is under investigation.
I have modified my app to use the tabbar control and it's working as expected. However, the back buttons that worked before modification no longer work. Any ideas on what the issue might be?
This is a problem that seems to have occurred for no reason. Everything was working fine, and now all of a sudden the overlay iframe for the admin interface renders too high so that any tabs are rendered underneath the toolbar. I hadn't edited any css or html so I don't see how I could have done this. Has anyone seen this happen, and how did they fix it? I'm attaching two images. One shows the site as it is (incorrectly). The other shows another similar site that is functioning correctly. Also, notice on the incorrect display, somehow the toolbar is showing OVER the browser scrollbar.
The problem is that I was swapping in JQuery 1.8.3 with hook_js_alter. This has a known problem causing this exact issue. I didn't need a later version of JQuery after all so I removed that, and it fixed the problem.