I have a weird problem occurring with a web page being viewed in google chrome. When viewed in ie9 / safari the embedded youtube video works fine but for some reason in chrome it just displays a black box on page load. The weird thing is the moment the page is interacted with, ie. the user scrolls down, the video will display correctly. I'm not sure what's going wrong.
The page in question is: http://core.slnmedia.com/inspiration/
There's a script on the page that will detect the width available to the right of a large tile and if there is sufficent space, the pop-out panel will display on the right. If not, the panel will display on the left. If you resize your browser window so that the 'bevis marks' tile sits at the top right corner of the screen and only has a small amount of space available on the right, then click on it, you'll see the effect I'm talking about.
The javascript function that's changing the position of the tile is below:
$('.large-tile').hover(function() {
$(this).find('.bw-photo').hide();
$(this).find('.inspiration-detail-wrapper').show();
$(this).css("z-index", "2");
var profile = $(this).find('.inspiration-detail');
if(profile.find('.content').text().trim().length == 0) {
showData($(this).attr('id').substring(1, $(this).attr("id").length));
}
// **Depending on how much window space is available, position the panel on**left/right
var available = $(window).innerWidth() - ($(this).offset().left + 300);
if(available >= 412) {
// If enough space then show panel on right
profile.css("left", "320px");
}
else {
// Otherwise attach left
profile.css("left", "-368px");
}
profile.show();
$('.scrollbar-wrapper').tinyscrollbar({ size: 252 });
},
function() {
$(this).find('.bw-photo').show();
$(this).find('.profile').hide();
$(this).css("z-index", "1");
$(this).find('.inspiration-detail-wrapper').hide();
});
The weird thing is that the line profile.css("left", "320px"); is what causes the trouble. If you don't include this line then the video displays correctly. For some reason the positioning causes the video not to display correctly.
I hope I've explained the problem correctly - does anyone have an idea of where I'm going wrong here? It's driving me nuts!
Thanks
I was having trouble after a Microsoft update. I cleared my cache and cookies for the last week and everything works fine now.
This worked for me:
<iframe allowfullscreen frameborder="0" height="315"
src="http://www.youtube.com/embed/A3pIrBZQJvE?wmode=transparent" width="420"
wmode="Opaque"></iframe>
Source
Related
I have a large, wide image I'm animating using CSS. The image is displayed and animated as expected on Chrome (Both desktop & on Android) and Firefox.
However, on Safari (Both desktop & mobile, v12.1), the image is usually not being animated, or worse - shown partly/not being shown at all - on the initial load. After one or two page refreshes it begins to behave as expected (probably because it loads the image from the cache).
After disabling the animation, the image is displayed fine on the initial load.
Demo
Source code
Any ideas why Safari behaves like that?
I ended up loading the image through JavaScript which made it show up and animate properly on Safari. This does not solve the source of the problem but works fine as a temporary fix.
const imageElement = document.getElementById('image');
const image = new Image();
image.onload = function() {
imageElement.src = image.src;
imageElement.className = 'animation-class-name';
};
image.src = 'pic.jpg';
I use a sticky sidebar on my website - https://geek.hr/znanost and i have DFP ads in it.
The problem is that the right top sidebar ad will load and then disappear quickly.
This happens randomly in all browsers, but almost always in Edge browser.
Does anyone know what the problem is?
Thanks
I've played with your site a bit and have found the following:
When nothing is displayed the outer container has a correct size but an internal ad has 0 height hence nothing is shown. I've examined the inner creative contents and it looks like it's trying to load something related to flash. It may seem that it 'disappears' because usually flash banners do load an intermediate image first and only then replace it with a .swf file.
When other (non-flash) creative wins the auction all looks fine hence the adtags setup looks good
So I would conclude that something is wrong with flash creatives rendering more so because you're using SafeFrames
Many sticky sidebars work by cloning your original sidebar, which can break unique elements that have events attached to them.
If your sticky sidebar has a unique class/ID that distinguishes it from a non-sticky sidebar, then you can just wait for it to appear before loading the ad:
<div id='sidebar_ad'></div>
<script>
function load_sticky_sidebar_ad()
{
let sidebar_ad_container = document.querySelector('#sidebar_ad');
if (sidebar_ad_container === null || sidebar_ad_container.closest('.theiaStickySidebar') === null)
{
(function(){window.setTimeout(load_sticky_sidebar_ad, 50);})();
}
else
{
googletag.cmd.push(function()
{
googletag.display('sidebar_ad');
});
}
}
(function(){window.setTimeout(load_sticky_sidebar_ad, 50);})();
</script>
Some modification might be needed depending on how your exact sticky sidebar works, but the general logic there should work for just about any sticky sidebar.
Okay, this is a strange one. When the embedded video is clicked (on Chrome) to be seen on fullscreen, it's moved on the right because of the sidebar. On Firefox, it's as it should -the video is correctly stretched over the whole site. However, there is something that doesn't allow Chrome to do that.
Okay, I managed to find that this is connected with the animation-fill-mode. And I'm afraid that this is duplicate of HTML5 video won't maximize beyond container dimensions in native full screen mode
I started implementing my software using maps api v3. Unfortunatelly i found out that v3 API has some serious issues which draws me back from bying a bussiness licence.
My clients use monitors with HD resolution which is 1920x1080 and the map takes 90% of the screen space. Unfortunatelly here comes the problem i am talking about. When i click with the mouse on the map and start dragging it it is not smootly and it is really annoying. All the fun goes away.
I tried some different scenarious using windows XP, windows 7 and Windows 8. The browsers i am working with are the latest versions of Firefox, Chrome and IE.
Here are the results when i try to drag the map:
Small screen resolution 320x240: Firefox, Chrome and IE handle it very well. It is impossible to notice that the dragging is not smooth.
Small screen resolution 320x240 with 10 polylines on the map: Chrome and IE handle it kind of well but if you have experience with v2 API you will notice a difference. Firefox - nightmare, dragging is not smooth at all.
Medium screen resolution 1024x768. Firefox - there is some incosistent lagging. Chrome and IE - kind of smooth dragging but if you move the mouse fast things get worse.
Medium screen resolution 1024x768 with 10 polylines on the map. Firefox - nightmare. Chrome and IE - you start to notice that there is some delay but at the same time it looks kind of smooth.
High screen resolution 1920x1080. Firefox - huge lagging. Chrome and IE - a little better but still there is a noticeble lagging.
6) High screen resolution 1920x1080 with polylines on the map: Firefox, Chrome ad IE - NIGHTMARE. It is almost impossible to drag the map.
Interesting facts:
The problem described above does not exists with v2 API of google maps.
The problem described above does not exists when the mouse is moved less than 50-60 pixels per second. Dragging is really smooth. When the mouse is beeing moved fast the lagging appears.
On http://maps.google.com the problem does not exists at all BUT when i open some of the code samples on developers guide the problem is there. Here is an example: https://google-developers.appspot.com/maps/documentation/javascript/examples/full/circle-simple.
I think that i described the problem as deep as possible and no matter how hard i tried to bypass it i could not find any solution.
I will be glad if somebody shares their opinion on this problem.
P.S. Unfortunatelly i do not have a key for v2 so i can not create an example where you can view the map outside my localhost but i found a web site where there is a side by side comparison (v2 and v3). Try dragging the maps to see the VERY difference.
http://www.wolfpil.de/v2-v3-sidebyside.html
The resolution of the maps is very small and most probably unexperienced users may not see the difference so i will give you also the seperate links to the maps and you just have to use firebug or a similar debuger to make the canvas resolution bigger. Then you will see what i am talking about.
map v2: http://www.wolfpil.de/v2.html
map v3: http://www.wolfpil.de/v3.html
We had issue that we had CSS3 transition added to all elements..
So remove transition and its worked fine..
See example:
#map * {
-moz-transition: none;
-webkit-transition: none;
-o-transition: all 0s ease;
transition: none;
}
Same here. What I noticed is that v3 fires a lot of events while panning the map and the browser tends to choke (FF especially). I say this because I also used Bing Maps API and the number of events per second for viewchange (equivalent for center_changed in Google) is much smaller. Also they provide the method addThrottledHandler() with which you can reduce the number of events generated.
From what I can tell, Google Maps seem to fire one center_changed event for each mousemove event and before the map's view is updated. So you get a lot of events generated but none of them are replicated on the screen; browser chokes on map view updates or it might be that the map waits until there are no more changes and only then it updates the view.
Edit: if we prevent some of the mousemove events to reach Google Maps then the browser will not choke on mousemove events plus all the other events that Google Maps generates from this event, like center_changed, and the map will pan smoothly.
To do this we add an event listener to the #map div (we can add it to body tag also). We add the event for the capture phase. When mouse moves on the screen, first the body tag receives the event then our #map div and then Google Maps elements (divs, tiles). This is the capture phase. After that follows the bubble phase in which the event goes back from Google Maps elements to our #map div and then to the body tag. Usually event handlers are registered for the bubbling phase so if we register a handler for the capture phase we can cancel the event and so there will be no bubbling phase for this event. This also means that Google Maps will not receive the event.
You can increase the period and space parameters to kill more events. Killing too many events means that the map will start to jump from one position to the next. Killing too few means that all events will reach Google Maps and the browser will choke on newly generated events from Google Maps and so the map will jump from one position to the next. Some middle ground works best.
Now after all these, Google Maps will not be as smooth as Bing Maps. This is because Bing Maps use inertia: when you move the map violently, the map will start slowly to follow the mouse and then faster and faster. This creates a very smooth pan indeed.
An interesting fact that I've found is that Google Chrome and Opera/Chrommium will generate about one mousemove event per second even if the mouse doesn't move! This code will kill those events too (because distance is zero for those events).
http://jsfiddle.net/uNm57/ (check js console in Firefox; you should see some events that are stopped and then one allowed event)
<html>
<head>
<style type='text/css'>
#map {
position: absolute;
width: 100%;
height: 100%;
margin: 20px;
}
</style>
<script type='text/javascript'>
var last = {time : new Date(), // last time we let an event pass.
x : -100, // last x position af the event that passed.
y : -100}; // last y position af the event that passed.
var period = 100; // ms - don't let pass more than one event every 100ms.
var space = 2; // px - let event pass if distance between the last and
// current position is greater than 2 px.
function init_map() {
map_div = document.getElementById("map")
// map
var map_options = {
center: new google.maps.LatLng(45.836454, 23.372497),
zoom: 8
};
map = new google.maps.Map(document.getElementById("map"), map_options);
// register event handler that will throttle the events.
// "true" means we capture the event and so we get the event
// before Google Maps gets it. So if we cancel the event,
// Google Maps will never receive it.
map_div.addEventListener("mousemove", throttle_events, true);
};
function throttle_events(event) {
var now = new Date();
var distance = Math.sqrt(Math.pow(event.clientX - last.x, 2) + Math.pow(event.clientY - last.y, 2));
var time = now.getTime() - last.time.getTime();
if (distance * time < space * period) { //event arrived too soon or mouse moved too little or both
console.log("event stopped");
if (event.stopPropagation) { // W3C/addEventListener()
event.stopPropagation();
} else { // Older IE.
event.cancelBubble = true;
};
} else {
console.log("event allowed: " + now.getTime());
last.time = now;
last.x = event.clientX;
last.y = event.clientY;
};
};
</script>
</head>
<body onload = "init_map()">
<div id="map"></div>
</body>
</html>
I was facing this issue in only mobile browsers. The drag/pan was smooth in desktop browsers but when it came to mobile there was lag when user dragged the map. I spent like 3 hours on this and finally realized that a missing meta tag was the reason.
Basically if you do not include this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
the problem comes. I feel incredibly stupid for realizing this after 3 hours or not adding the meta tag in the first place. But anyways if someone else is also making this mistake I hope I saved some of your time.
I faced the same problem and lost my days to solve, finally I figured out how this can be solved simply.
#Arturs Smirnovs's answer was very helpful.
In my case, there was a transition in css, by that google map was not working smoothly, I added the css to disable the transition into the map, so that the map worked very expectedly.
Hope this can help anyone.
.google-map * {
transition: none !important;
}
I've created a rather simple Flex application using Flex Builder 4, which connects to a webcam on the user's PC. To do so, Flash is presenting the user with the infamous privacy warning.
Now, the problem is that user can't click on the panel, as it seems unresponsive to any user interaction.
Some more details:
Firefox 3.6.12 on Mac/OSX, Snow Leopard.
Adobe Flash Plugin 10.1.85.3 / 10.1 r85
The Flex app is working fine in its own window/tab but the problem shows up as soon as the html page with the Flex app is embedded into the iframe of another page.
If I artificially put an Alert box before connecting the camera, the user is able to interact with the Flex application but as soon as the Privacy panel is shown, the Flex app stops interacting.
The app works fine under Chrome and Safari but I have not tried this under Windows.
I've read that there are problems with CSS positioning so I removed any CSS style impacting the Flex app.
Before I change my strategy and get rid of the iframe (which will cost me quite some effort) I'd be happy to know whether others have experienced the same problem and if there are workarounds.
Thanks.
I had the same issue for weeks now. I found what may be the problem. It has something to do with the css alignment. try to remove the text-align:center; from the div flash is in and it will work again. Somehow the active areas from the security panel don´t shift with the display image…
In my application, this problem is apparently caused by an element containing the flash having the css margin: 0 auto. This leads to the left edge of the flash object sometimes being reported as a decimal, e.g. $('.flash').position().left --> 450.5px. Whenever it's not a whole number, the security panel failed to react to clicks.
The fix described in https://bugs.adobe.com/jira/browse/FP-4183 and linked to by Christiano almost works. However, it failed whenever the browser was resized to be so small that the left margin disappeared.
Here's what fixed the issue for me:
function registerMozillaFlashFix() {
if ($.browser.mozilla) {
$(window).resize(function() {
$(".flash").each(function(ii, e) {
var $e = $(e);
$e.css('margin-left', $e.position().left % 1 === 0 ? '0' : '0.5px');
});
});
}
}
Then just call window.resize() once your flash has been set up.