I am using the youtube api to create a flash video inside of a twitter bootstrap modal. It works fine in all browsers except in chrome. After closing the modal and hovering over buttons or images fragments of the video appear in there place. I tried changing wmodes, opacity, visibility. I can't post a link because it's a client project that is in development. Does anyone have any experience with this? Thanks in advance!
The default css3 transition properties that are for the bootstrap modals were causing a repaint issue. After removing the transitions this no longer occurred.
Related
I'm developing a web application based on EmberJS, that should be running on multiple device types. The application includes dialogs, that are handled using the ember-modal-dialog and liquid-wormhole addons.
When opening the dialog on an iPhone, scrolling within the dialog eventually stops working, and instead of scrolling the content, some underlaying(?) elements are overlapping the dialogs content from the top or bottom (depending on the scroll direction). It's actually hard to explain, so I've made a video:
https://drive.google.com/file/d/12Xfvxvx89r91svEyybMf1j6HFD3v_Tkl/view
Also, you can try it yourself. Click on the following link, and then on the button of the first item on the page.
https://rkr9z8g.suitepad.io/category/6463/page/22280
Does anyone knows or have an idea, how to fix the problem?
I've got same problem in my project. But i found that some duplicate style on my div. Try remove overflow-y: scroll and add -webkit-overflow-scrolling: touch. Hope that helps.
We're using fullPage.js, it provides a slideshow-like experience. We're embedding a Vimeo iframe into one of the slides which should cover the whole are of the slide.
Everything works as a charm in Chrome, but in Firefox and iOS it is impossible to scroll/swipe over the Vimeo iframe. fullPage just won't react to it.
I tried covering the video with a transparent div. Again, it works in Chrome, but on iOS the browser would not allow you start the video programmatically, so covering the video with a div makes it unable to start the video: Vimeo player says "Uncaught Error: The viewer must initiate playback first."
Is there a solution for this issue?
Here's a demo of the problem: http://jsbin.com/tunove/1/edit?html,output The video is on the second slide. Scrolling/swiping over it won't switch slides in Firefox and iOS.
You may try this CSS solution:
element {
touch-action: pan-y !important;
}
Where element is you would put the vimeo embed class/id. I haven't tested this but I've had a similar issue with something else I had where the swipe action was stealing the scroll action. Hopefully it'll help in your case as well.
I create simple image slider, using jQuery. Tested on all browers. All works fine, but not in WinXP Safari. When i open another tab and load other website, and then focus again on my jQuery slider website tab - Safari crashes. Its happend only when my slider website actually animate images using fadeIn effect. When i try to switch tabs on my site, Safari crashes. I find what causes that, but not find an solution to the problem. Problem is probably with window resize and functions defines of dimensions of images and DIVs. And/or maybe setInterval function. I find many websites with different javascript and jQuery scripts with the same problem and no solutions (i.e. http://www.jssor.com/demos/banner-slider.html).
I find solution. Problem disappeared when i start script from:
$(window).focusout(function() {
if (navigator.userAgent.indexOf("Safari") > -1) {
location.reload();
}
});
I hope, that will help in some other problems with Safari.
For a current project that i am working i encountered a small issue.
I have a video that needs to be played in a lightbox on desktop, and on mobile to load directly from the source. I am currently building the website with wordpress and am using a shotcode plugin to display the lightbox with.
I guess i have to make a media specific call for mobile devices and let the specific div behave differently on mobile..
Can anybody give me some pointers and help or an example how i could possibly fix this?
Let's say you have a link to open the modal on desktop. This link can be hidden on mobile with the help of media-queries (i'm using some example classes here to illustrate the working):
Open video in modal window
The link shouldn't show up on mobile devices, since you want the content displayed right away. For the video you could use something like this:
<div class="hidden-on-desktop" id="modalWindow">Video here</div>
On the desktop this div should act like a hidden, modal window and on mobile it displays the content. You should style the modal window in a specific media-query since you don't want the content to be displayed like a modal on mobile devices.
Hope this helps a bit :)
I am using Malsup's Cycle plugin for simple slideshows on a website. (http://jquery.malsup.com/cycle/) Additionally, i have a hidden menu which appears on small devices and uses a toggleClass to show/hide the menu.
It seems as the two are interfering when used in conjunction - I can get the menu to slide into view when triggered, but the slideshow won't work. Or, I can get the slideshow to work, but the menu will not slide in.
Stranger than anything: When I view through Dreamweaver's Preview tool, it works fine, but on a live site the issue persists.
Can anyone offer any insight? Perhaps I have missed something that someone else can catch?
Live site and all code can be viewed here: http://rai.desensdesigns.com
Thanks in advance.