I inherit a website from another programmer and I am facing an issue. The website has a css animation that works perfect in Chrome and Mozilla but doesn't work in Internet Exporer 11 (maybe previous versions as well). The background is just plain white with no background image animation.
I guess it is something with the prefixes of the animation CSS but I can't make it work
Can anyone help me?
Link: http://presentamivuelo.com/ver-view/TIiY1wLt
I know this post is old, but I'm suspecting the issue may have been the same as the one posted here: Background-image in keyframe does not display in Firefox or Internet Explorer
If anyone else is here for the same reason, you cannot animate the background-image as it is a non-animatable property https://www.w3.org/TR/css-backgrounds-3/#the-background-image
Add IE=edge to your X-UA meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
Your site takes over 3 minutes to load with a 4 Mb/s connection (in all browsers)... the target is 3 seconds.
See http://developers.google.com/speed/pagespeed for some tips (compress your slideshow images, resource cache, etc.) and http://modern.ie/report
You may also like to look up what the bounce rate for similar sites is at http://alexa.com. Usually your hosting provider is able to provide you with some basic site statistics. I would expect that the site has a very high bounce rate and a short visitation time.
Honestly.... it's a dogs breakfast there.... Instead of third-party hosting, you should also consider dedicated hosting with your own server instance.
Related
This question is a part of another question I asked. However, I already found the answer to this part and thought it would be useful for other people as well.
Part of my other question:
I am using serenity in combination with cucumber for automated screen tests and want to include full-page screenshots in my serenity report. The screenshots in the report are normally only a capture of the viewport. Oftentimes however, this doesn't provide enough information as this is only a part of the screen.
I found that the capturing of serenity screenshots is a part of driver implementation. As most drivers conform with the W3C definition of screenshots those drivers only capture the current viewport.
tl;dr: use FirefoxDriver
I contacted David Burns of W3C. He was very helpful and his answer cleared up a lot for me.
First of all, FirefoxDriver for now still takes screenshots of the full page. David said:
FirefoxDriver (and in Marionette our W3C webdriver implementation) on the otherhand does screenshots by dumping the Document into a canvas and calling a Firefox specific API on Canvas to get a screenshot. Since we dump the entire document we can do full page screenshots. This however may change when we start putting more of the Servo code into Firefox and the way we can access screenshots changes.
So unfortunately this will probably change in the future, but for now it is good (when you use FFdriver)..
He also explains why this choice has been made and references to a talk he gave about how the rendering of webpages works.
Later in our conversation he also referenced to the minutes of the discussion about how screenshots should be captured.
His full answer:
Hi
The tl;dr; is its really hard take fullscreen shots since not all browsers have the information to create a screenshot of the whole page.
Long version:
At Selenium Conf this year I did a talk about how #isDisplayed can sometimes lie to you and the reason is the same as the screenshots. To make browsers appear to make web pages load as fast as possible they workout what needs to be rendered in the view port and then render it, via doing calculations on the CPU or GPU.
Because of this approach it means that browsers build up a display list of certain areas and creates "tiles" to render. It starts from the viewport and works out. Now, a browser is not going to render a whole page at a time, it will have a few times above and below ready for when you scroll and calculate the rest when you scroll.
Now ChromeDriver and Microsoft's EdgeDriver both do their screenshots from the display list and have internal APIs that only give them the viewport. This is because their reference tests (or reftests as they are known to vendors) only care about that. They both don't feel its worth the effort to do the rest because of the edge cases.
FirefoxDriver (and in Marionette our W3C webdriver implementation) on the otherhand does screenshots by dumping the Document into a canvas and calling a Firefox specific API on Canvas to get a screenshot. Since we dump the entire document we can do full page screenshots. This however may change when we start putting more of the Servo code into Firefox and the way we can access screenshots changes.
Because we only know the viewport info it leads to us then having to stitch images together to get a full page screenshot. Both ChromeDriver and IEDriver do this and both development teams consider this an ugly hack because its not always right and there isnt much they can do to make it right.
I hope that helps and explains it well. I suggest watching my talk as I explain how renders and layout engines work in Browsers.
David
The title pretty much sums up the problem - I have a website and I would like to specify an image that should be shown in the speed dial when a user adds my site to his speed dial. I can see that when I add for example Gmail or Facebook, they both have a specific image whereas my site is just shown on random color background with my domain name as a text.
So is it possible to specify Opera Speed Dial image in HTML using some meta tag?
Thanks
PS. I did find this answer, however, it's over a year old.
Short answer
No. However, you can suggest an image to the user to use, but even then the speed dial will offer thumbnails of your site before any icons.
Long answer
Each time you see an entry on your speed dial page that's displayed as text, the domain of that site is checked against Opera's Speed Dial server at speeddials.opera.com.
The format of the API call is https://speeddials.opera.com/api/v1/thumbnails/some.domain.name. This call will either return a HTTP 200 OK response containing a PNG image (264px wide by 168px tall) or return a HTTP 404 File Not Found response with no content.
It is likely that the Opera team monitor the calls to this server and when a particular domain hits "critical mass" they partner with that company (this is only a hypothesis).
What you can do
When a user bookmarks your website, they can edit the bookmark and select an image for your website. Like #Angel had in their response, you can link in an appropriate image using a link element with rel="icon". An image linked in this way is then suggested to the user.
I personally have found great success in linking a PNG image with dimensions 264x168px with the below declaration following the normal icon declarations:
<link rel="icon" sizes="264x168" href="/path/to/speeddial.png">
The sizes attribute is included to aid user-agents/browsers in locating the right icon image for their platform without having to download each one. This should minimize fetches of this image by other browsers.
A bit late, but you can add this link to your html head:
<link rel="icon" sizes="144x144" href="ico/favicon.png">
Something happened few weeks ago that i was unable to tackle myself. There is no information regarding my problem so i have to ask for help.
We have a simple youtube videos embed in our site. However the control icons refuse to show except the one that controls the "mute". The links clearly exists as when you mouse over them you see the popup.
It is not a player size problem since i tried it all.
The problem didn't existed few weeks ago so this is something new and totally over my head. Please help.
I am including a link to a simple html with single embedded video that shows the problem. -> Here
The code itself is this:
<iframe src="http://www.youtube.com/embed?listType=search&list=madonna%20la%20isla%20bonita" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowfullscreen></iframe>
ps1. I have checked this with Edge and Safari and so far this problem only exists when videos are loaded by Firefox (43.0.4)
ps2. I have updated to Firefox 44.0 and problem still exists.
I'm relatively new to VideoJS; I've used it successfully in all browsers EXCEPT ie < 9. I've seen a few threads started and kind of answered RE the Flash fallback for IE 8 and earlier.
My issue is that I can't get the Flash fallback working at all. I'm using the CDN version of VideoJS and assuming that I don't need to upload anything or make any other changes to my code other than what is outlined on the VideoJS demo page.
In IE 7 and 8 I get nothing. I don't get a SWF dynamically embedded; when I check my log and do some debugging via the console I can still see the tag; I am assuming that I should be seeing a dynamically generated and embedded .swf file for the fallback.
I've seen in a couple of threads that the latest release of VideoJS is broken / Flash fallback is not working. I've also tried a few of the workarounds outlined on the various boards - nothing at all is working for me.
Is anyone else having this issue / have you managed to resolve it? the v("path_to_swf") fix is not working... absolute paths are not working... preload="none" is not working...
Any help is greatly appreciated!
Thanks!
Without sample code, I have no idea if this will help, but IE will not initialise embedded Flash objects that have the style: visibility: hidden; (including any parents of that object). You can probably see the Flash object be requested by looking at the network traffic, but it won't fire any of the Video.js events until visibility is set to visible.
IE9 will use the HTML5 player, and IE7/8 will fallback to the Flash player (which is why the problem can't be observed in IE9, unless the techOrder has been changed to list flash first).
I've been playing around with EasySlider and everything was working perfectly - until I viewed my site in IE9.
Instead of displaying the slider with 3 images sliding across, it displayed all 3 images sat one underneath the other, and a message at the bottom of the screen saying that scripts etc had been blocked and did I want to allow blocked content.
As I was using this in the hear of my website it pushed my whole site down the page and just looked stupid with the 3 banners on top of each other.
I realise I can get rid of this by unblocking the content, but that's not the point. I think this is the default security settings for IE so everyone that visits my site will see it like this for the first time (or everytime if they don't unblock the content).
So is there a way around this? Or at least a way that if the script is blocked only the first image is shown instead of all of them? This seems a pretty big flaw!
I had the same issue as you and found a very simple solution for it using CSS. All you need to do is copy and paste the line of CSS code below onto the screen.css stylesheet that came with the EasySlider 1.7 Plugin. I hope this helps.
#slider {
position:relative;
}
I found this solution at the "ClickNathan Handmade Websites".