Having a bit of a conundrum with cross-browser compatibility and could use some help.
Our live version linked to below, seems to work perfectly fine on most browsers, including IE9+, but the controls appear hidden in a non-emulated stock out-of-the-box version of IE8:
http://dig-houston.com/portfolio/inspiron
Here's a screenshot of what it looks like in IE8:
At one point, I was still able to slightly see the controls sticking up from the bottom (and click) which lead me to believe something had gone awry in absolute positioning or the rejection of newer CSS techniques. But as my fine tuning progressed and heights were adjusted, I believe the controls were hidden further out of view outside the box.
That being said, I think this is just a CSS issue, but haven't targeted the right styles being applied yet. To anyone else out there using Video.js
Related
In my project I'm using swiper.js as a slideshow, each slide either contains and image or a html5 video with webvtt captions / subtitles.
On debugging, we noticed that the subtitle position is wrong (too low, cuts off screen) on webkit browsers.
After much debugging it turned out that this css3 rule on the parent div (the swiper-wrapper) makes the vtt position wrongly:
transform: translate3d(-1024px, 0px, 0px)
When you put the video in the first slide, all goes well, since there's no css translate yet.
This seems to be a core webkit issue: default webvtt positioning breaks when using css translation on a parent.
The workaround I found is to add a line positioning in the vtt itself to every subtitle element, like so:
WEBVTT
00:00:02.160 --> 00:00:06.440 line:90%
hello world
00:00:06.560 --> 00:00:11.920 line:90%
testing subtitles
Any sentence without the "line: 90%" part is rendered partly offscreen. It seems this setting forces the webvtt parser / renderer to set itself to the correct position.
QUESTION: did anyone encounter this issue yet and is there any other (easier) workaround for this bug? Adding the "line:" part to all subtitles would be a hell of a job.. unless there's a good editor that can do that stuff in batch.
QUESTION 2: Since this seems to be a webkit vtt parser bug, anyone know where to best report this?
Test setup here: http://orgonemedia.nl/webvtt-bug/
I'm currently debugging some WebVTT files for English captions and other languages too. I'm experiencing a similar problem, although I can't say what is exactly causing it. I'm going to try the line:90% fix you've suggested here.
ANSWER TO YOUR QUESTION 1: Regarding the job of adding it to all the subtitles, you'll be happy to know that's actually pretty easy with the right tool. I use Sublime Text Editor. The way I would do it is use "Find all" to find all the occurrences of -->, then simultaneously edit each of those lines, using the arrow key to navigate across to the right place on the line (since each subtitle out-time is the same number of characters, 12), then type in line:90%
UPDATE:
So I implemented your suggestion, using the method I outlined, and it successfully repositioned my captions.
More details: I was only experiencing the problem of captions being half off the bottom of the video when viewing on an iPad. Oddly enough, viewing the same page on an iPhone, they were positioned correctly without any change. The 90% change still adjusted it up though.
Intriguingly the line:90% code does nothing to adjust caption position when viewing the page on Chrome.
I'm having trouble getting much at all to display on Safari desktop. I think there's something invalid about my file format, but I'm darned if I can find it.
When editing the captions through my video hosting service's caption editor (I'm using JWPlayer), the timecodes show up as being invalid:
Image showing caption editor with invalid warning
I am displaying a set of properties on Bing map. It works all fine in Chrome, FireFox, IE, and Safari on Windows (version is 5.1.7 - their latest version for Windows). But it doesn't work in Safari 7 on Mac.
When displayed correctly, all properties are located on a green residential area. But on Safari 7, all properties are displayed on the far left of that area - on a totally wrong location. Also, the larger left part of the map is blank (there is no map!).
I saw a similar post Bing Maps Issue on Safari 7. The left part of their map is also blank. The problem there seems not solved. I followed Microsoft's guideline (meta, CSS position/width/height etc), none of them work.
I suspect that's a Bing bug? Or a Safari bug?
Sorry I don't have enough reputation to post images...
Now that I solve the problem, I confirm that this is NOT a bug of Safari or Bing.
the <div> that load the the map is embedded in many other divs, panels, fieldset, Telerik ajax panel, RadTabStrip etc. You have to remove some of divs, and also some styles of divs to make it work. It's tricky, you have to do many tests to finally pin down which element caused the problem and remove that element.
I took me several days to figure this out.
(first post on stack overflow!)
Computer Engineer, but I'm fairly new to web development and I'm trying to learn all the best practices.
I typically add my styling class to a div when adding an image. (not so sure this is the best way anymore)
So for example, right now I'm adding a div with a border and a max width/height of 100% then letting the image inside the div expand to either but not outside of the div.
This however isn't working in IE9. Its expanding the to image full size creating major layout issues.
This has probably been gone over but I couldn't seem to get the search terms right to find the answer.
So is there a standard way to fix this? Even though it won't really be too difficult to add max-width and max-height to the tag I don't really wan't to do that..I'm sure there will be some issues with doing that. This site I've been working on is getting fairly large and VERY complex.
I think internet explorer might be a tiny bit retarded. How did it ever become a major browser!? Go Chrome!
Thanks!
I'm having a problem with layout in Safari that works fine in Chrome and FF. It seems that Safari includes the padding within the width while Chrome and FF don't. So what's 630px in FF
due to width + padding is only 600px in Safari. This: Padding in mozilla firefox and in safari seems to show that the box model is different in Safari. If so I would expect a standard solution would already have come up but when I google this, it seems that hardly anyone has this problem.
Is the box model in Safari really different and is there a standard solution? Or do I just have to 'debug' my CSS?
EDIT: apparently it's because the div was using display: table. When I changed it to display: block, it worked as expected. It's still strange though because it's working fine in other browsers (display: table).
Which doctype are you using? When I use < !DOCTYPE html > (the HTML5 doctype declaration) Safari and Chrome's padding behaviour is definitely exactly the same, and as the standards dictate.
In CSS box-sizing handles the box model. By default it's set to the 'normal' but probably incorrect 'content-box'. Support for box-sizing is reasonable across browsers now so you can probably move to 'border-box' but will need to handle it differently in IE6/7 (if you support them).
AFAIK Safari (webkit) should respect this.
When embedding html inside of SVG using the foreignObject tag, webkit based browsers render the backgrounds of the embedded html elements behind the svg elements. See http://code.google.com/p/chromium/issues/detail?id=35545 .
Here's an example : http://www.mxgraph.com/demo/markup/webkitbg.html
The green div should be on top of the red.
Does anyone know of a workaround for this issue? Maybe some incantation of z-index and/or grouping of elements or something in svg to fool webkit into doing the right thing?
This is webkit bug 58417, fixed on 2011-11-10. The fix is in Chromium version 17, which is currently in beta as of 2012-01-09, and should be released in early February. Not sure when the fix will land in Safari, but luckily I don't need to support it.
So the workaround seems to be "wait a month"...
I've just been hit by the same issue. Even though the bug is fixed since a long time in Chrome, Safari seems to be ages behind with the codebase.
My solution is to add style="display:inline-block" to the first child of the foreignObject tag. This seems to fix the problem.