Using css-transforms on a YouTube embed renders the video black in at least Safari 5 and Firefox 4. Chrome 11 handles it just fine.
I've made an example here: http://jsfiddle.net/oskarrough/4vRzd/4/
I need the css-transform in order to do some fancy layout positioning. Is there any way, css or js, to hack it to display the video?
I am tackling the same problem right now. I am not doing any fancy css transformations, just scaling.
Although not working perfectly, I got the video to display by using the wmode=transparent option.
i.e.
<iframe width='640' height='480' frameborder='0' src='http://www.youtube.com/embed/YOUTUBE_VIDEO_ID?wmode=transparent' type='text/html' class='youtube-player'></iframe>
Are you sure you can't use this instead:
iframe {
position: relative;
top: 100px
}
http://jsfiddle.net/4vRzd/5/
Or margin-top: 100px, or a negative margin on some other element?
Someone had to post this, because you didn't mention that they aren't viable options.
Upvote for lawrenceshen.
The wmode=transparent worked.
var player;
function onYouTubeIframeAPIReady() {
console.log("onYouTubeIframeAPIReady");
player = new YT.Player('gallery-youtube', {
height: '594',
width: '883',
videoId: 'u1zgFlCw8Aw',
playerVars: { "modestbranding":1, "wmode":"transparent" },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
For me, this problem only occurred in Firefox 4+ on Windows 7 and Windows 8. It didn't happen on any other browser or on OS X.
I spent hours stuck on this problem. I display YouTube videos in a modal which uses CSS3 translations to slide into view.
My solution was to remove the transform/transition classes once the modal has appeared.
Once I did that YouTube embeds appeared and no more empty black box.
More details: I use animate.css and add class="animated fadeInDownBig" to slide the modal down. Once it has reached its final destination, I remove those classes again.
It's a really strange problem which I hope Mozilla fix really soon.
Related
I am using bootstrap datepicker on a website, It is also styled to be sticky by giving its parent a fixed position, Its working fine normally but on testing it on Ipad and Iphone (not tested on andriod devices yet), when I scroll down and try to touch the datepicker to open it , it scrolls back to the top of the page, how can I fix this issue?
Similar problem arises when I am using a custom dropdown Selectric
I have created a simple striped down version of the problem here. Note that the problem wont replicate on emulator but on an actual mobile device or ipad.
I also faced same issue and resolved it as below solution , you can try it.
datepicker has beforeShow property where you have to set calendar position.
$("#EffectiveDateAccept").datepicker({
changeMonth: true,
changeYear: true,
// minDate: 0,
dateFormat: 'mm/dd/yy',
beforeShow: function (input, inst) {
var calendar = inst.dpDiv;
setTimeout(function () {
calendar.position({
my: 'center bottom',
at: 'top',
collision: 'none',
of: input
});
}, 1);
}
});
Try this
.dropdown-menu{
position: fixed!important
}
This issue is found unrelated to specific environment (not iOS only) and has a solution as follows:
You should find out which datepicker div class sets datepicker actually from hidden to visible (which of them change upon successful show and hide event).
Add to your css for that class (here modal-open) the missing show command:
body.modal-open {
overflow: visible;
}
Now the scroll should stay in place.
Example refers to html like:
<body>
<div class="modal-open">
Datepicker
</div>
</body>
Source:
Bootstrap modal: background jumps to top on toggle
PS. My source has also 18 other options, if this seems too hacky.
I have made this current one once, worked like charm and was not so tricky to do.
just add This CSS code to your site it will fix that issue.
.element{
position: sticky!important;
}
If you view it in Inspect Element, it's creating a separate DIV in HTML which has position absolute. Just change that position to sticky. That's why that happens. See in the image.
You can do this by adding this line of CSS code:
.dropdown-menu {
position: sticky;
}
Hope that will help you
As a start, have you looked thru the GH repo's issues for something matching your description?
This link specifically sounds promising:
https://github.com/uxsolutions/bootstrap-datepicker/issues/1866
I think what might be occurring is that your datepicker is set to absolute of the body, not the parent you are setting as "fixed".
So when you click to open the datepicker, your mobile device is scrolling you to the active element (in this case, the datepicker at the top, set to absolute on the parent).
Also there seems to be some default mobile behavior related to scrolling:
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
Perhaps setting the following will help:
-webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
The following link provides more context on this scrolling behavior:
https://weblog.west-wind.com/posts/2015/Jun/05/IPad-Scroll-Issues-with-Fixed-Content
It appears to me that if the map container is placed anywhere but the top left corner of the page, pinch zoom is no longer centered properly. I have encountered this problem on iPad 2 (Safari 5.1), iPhone 5 (Safari 7.0), Sony Xperia tablet Z (Chrome 34.0).
If i have missed something obvious as comes to forcing this thing into expected behavior, I would be delighted to have this pointed out to me. Otherwise I'm inclined to call this a Here bug.
This simple fiddle replicates the issue when used with a touch screen device
http://jsfiddle.net/Thernys/E97rn/
And since apparently code is required with a fiddle link, I replicate the relevant parts of the super simple example.
HTML
<body>
<!-- add a number of <br/> if you like -->
<div id='mapContainer'></div>
</body>
CSS
#mapContainer {
width: 200px;
height: 200px;
float: right;
}
JS
var nMap = new nokia.maps.map.Display(
document.getElementById('mapContainer'), {
zoomLevel: 10,
center: [52.51, 13.4],
components: [
new nokia.maps.map.component.panning.Drag(),
new nokia.maps.map.component.zoom.Gesture()
],
}
);
I've faced this exactly same issue. After some research I realized that it's occurring because the map container wasn't placed in the cartesian origin of the document (top: 0, left:0). I don't know if this is a bug of the API or if there's any configuration that fixes it.
The workaround I found out was to create the map inside an iframe element and make sure it occupies the entire width.
I'm using Google Maps API v3 in my application. Maps Pan control isn't displaying properly on IE 10 and IE 11.
.
It's working fine on Chrome, Mozilla and IE8, IE9. I can't figure out the way to resolve it.
on Stackoverflow, a nearly similar question is posted here: Google Maps zoom control
but not solution is not application. Definitely, it's the CSS issue, but I couldn't resolve it. I've checked in IE developer tool for any css class overriding, but no luck.
Have anyone faced the similar problem or anyone had any solution for this?
EDIT: The basic map is also disordered in my IE 11 version.![enter image description here]
-- Anil
Well, as #geocodezip suggested, it's a bug till today in Google map API and best solution for it is to use css.
use below css on the page :
.gmnoprint div[title^="Pan"]
{
filter:alpha(opacity=0)!important;
}
hope it would help others and save time.
-Anil
I just added the styling to my CSS , and fix
.gmnoprint div[title^="Pan"] {
opacity: 0 !important;
}
An important addition to non-English localizations:
You must use in style not "Pan", but the text specific to your locale. For example, for Russian localization - "Пан".
Hover your mouse on a button of pan Control and look pop-up hint. In style the first 3 letters from it are used.
FWIW - I've found that the above CSS isn't enough because we next get "+" for zoom in/out for street view. I made a slight modification...turn off all title items except the one we don't want hidden.
.gmnoprint div[title]
{
opacity: 0 !important;
}
.gmnoprint div[title^="Exit Street View"]
{
opacity: inherit !important;
}
Late to the party I know, but when I came across this issue I implemented the following fix for my applications using Google Maps V3 which I know is similar to what has already been posted here, but just in case it helps as I know how damn frustrating these sorts of issues can be!
<script>
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
</script>
<style type="text/css">
html[data-useragent*='Trident/7.0'] div[title^="Zoom"]
{
opacity: 0 !important;
}
html[data-useragent*='Trident/7.0'] div[title^="Pan"]
{
opacity: 0 !important;
}
</style>
I spend the day figuring out how to fix the flickering between page transitions in JQuery-Mobile 1.3.1.
I found that
.ui-page { -webkit-backface-visibility: hidden; }
or setting the data-transition to none
or removing meta.attr( "content", disabledZoom ); and meta.attr( "content", enabledZoom ); from JQM file
helped.
But apparently that is only working if the webapp is just one "multi-page".
I am using 4 separate pages.
In iOS (mobile Safari) and on PC (Browser: Chrome) I don't have any transition flickering.
But as soon as I add the App to to the Homescreen it flickers again.
Here I read that there is no possibility in avoiding page flickering for (PhoneGap/Homescreenapp) if there are separate HTML files in use: https://groups.google.com/d/msg/phonegap/tqdv3tYIj_o/qfft32VbLg8J
Is there no solution for this?
Nothing answered so far worked for me.
I ended up binding a function to all links or elements which cause a page change.
In the function, i trigger the page change but explicitely tell it 'none' for the transition.
Here is an example:
Javscript (jQuery)
$('.item-navbar-people').on('tap', function (e) {
$.mobile.changePage("#page-people", { transition: "none" });
});
Markup
<div data-role="navbar">
<ul>
<li><a class="item-navbar-people ui-btn-active">People</a></li>
</ul>
</div>
Hope this helps!
Work-around Solution
So, these are the things I tried:
data-transition="none" / $.mobile.defaultPageTransition = 'none';
.ui-page { backface-visibility: hidden;
-webkit-backface-visibility: hidden; /* Chrome and Safari */
-moz-backface-visibility: hidden; /* Firefox */ }
delete meta.attr( "content", disabledZoom ); & meta.attr( "content", enabledZoom ); in jquery.mobile.js
-webkit-transform:translate3d(0,0,0);
data-position="fixed" headers/footers
deactivating user scale in meta tags
It did not work for "Homescreen-App"/"PhoneGap-App"
I also applied body{ background-color: black !important } to make the blink appear more subtile , which worked but was still ugly.
So I found a work-around solution: jQuery 1.1.0 RC2 and jQuery 1.7.1: no flickering when data-transition is set to none.
This is a known issue.
Disabling/Enabling zoom BEFORE each page transition will resolve the issue.
I figure out it, changing the scale of viewport meta tag.
Let's me clarify...
In my tests I saw that when I apply some zoom in page on mobile devices, the transition works perfectly. So, just change the initial-scale in your viewport meta tag to something higher than 1.0, something like 1.01 for example. That's it!
Example:
<meta name="viewport" content="width=device-width, initial-scale=1.01">
I spent weeks trying all suggested solutions in the Internet, what works for jquery.mobile-1.3.2 , Android 4.1.2, phonegap 2.9.0 is to delete these lines in jquery.mobile-1.3.2.js file
meta.attr( “content”, disabledZoom ); // just put // before the line
meta.attr( “content”, enabledZoom ); // just put // before the line
This will eliminate double flicks, also
set data-transition between pages to none
data-transition="none"
(The second fix is temporally until you can find a solution to get ride of remaining white page during transition)
Using this solution, no need to remove data-position="fixed" from header or footer which is one of helping solutions, but affecting interface design.
source: comments on http://blogs.bytecode.com.au/glen/2011/07/14/eliminating-annoying-flicker-transitions-with.html
I had the same problem and something that sped things up and eliminated the flickering effect was implementing fastclick.js found here: https://github.com/ftlabs/fastclick.
After linking to the .js file,
Add
<script>
$(function() {
FastClick.attach(document.body);
});
</script>
to the head of your document.
Voila. That helped me, hope it helps you too!
I've built a very simple jQuery overlay which works fine in non-Microsoft browsers. I now want to debug the CSS for the overlay so that it works in IE 8 Comptability View and Quirks Mode.
The overlay can be seen at http://pointlessandannoying.com/so/ - click the 'about' link in the bottom right of the page to display the overlay. Could anyone suggest a good place to start with regards to the debugging?
If you're looking for code debugging help
You may be able to eliminate the quirks/compatibilityView problems by forcing IE8 Standards view. Put <meta http-equiv="X-UA-Compatible" content="IE=edge" > in the header.
If you're looking for Debugging tools
Firebug Lite bookmarklet works well. IE also makes a debug toolbar, which is not as easy to use (imho).
What exactly is the issue that you seem to be running into - I see that the overlay displays in IE8 (and Compatibility Mode etc.) however it seems to be being cut off towards the bottom, and is also un-clickable.
It could be an issue dealing with the z-index of the overlay or possibly how it is positioned (relative or absolutely) as I know the IE Family isn't fond of overlays. I'll dig into in some more to see if I can find anything.
One of the issues seems to be the size of the overlay - in style.css the height of #about-wrapper and #about-lightbox-wrapper were each set to 200px. I found that changing that to 400px would allow them to be seen in both IE and other browsers.
The only issue remaining is being unable to access the overlay area (The "About" area). You may want to consider using some jQuery to possibly change the z-index on show / hide so that it will be accessible.
In script.js:
Consider changing:
function about_click() {
$('#about').click( function() {
$('#about-overlay').show();
$('#transparent-overlay').show().fadeTo(200, 0.5);
$('#about-wrapper').delay(200).show().fadeTo(170, 1.0);
});
}
function about_close() {
$('#about-overlay').hide();
$('#about-wrapper').hide().fadeTo(0, 0);
$('#transparent-overlay').fadeTo(200, 0, function() {
$(this).hide();
});
to something like:
function about_click() {
$('#about').click( function() {
$('#about-overlay').show();
$('#about-overlay').css('z-index',250); //Line Changed
$('#transparent-overlay').show().fadeTo(200, 0.5);
$('#about-wrapper').delay(200).show().fadeTo(170, 1.0);
});
}
function about_close() {
$('#about-overlay').hide();
$('#about-overlay').css('z-index',0); // Line Changed
$('#about-wrapper').hide().fadeTo(0, 0);
$('#transparent-overlay').fadeTo(200, 0, function() {
$(this).hide();
});
My syntax may be off - but I hope that this can at least maybe point you in the right direction.
Thanks everyone for the tips - in the end I outsourced the job, but all of this is good for future reference.