Safari -webkit-box-reflect for video not working - css

I have a website where I'm using Videojs-panorama
When I create reflection of this video using -webkit-box-reflect it is working fine in chrome and opera.
But in safari the canvas is not getting reflected instead only video is reflected.
Any help will be really appreciated.

Related

Youtube Embed breaks on mobile Safari

I am encountering a weird issue once again, and it again happens to be in Safari on iPhone. Safari on macOS works fine, and so do all other major browsers.
Here's the issue: Embedding a YouTube video in an iframe transforms the iframe to the left, out of the viewport. There is no transform applied to the iframe, or any parent elements. I double checked, but I am out of luck. Funnily enough, there's two quirks:
The clickable area stays non-transformed. I can interact with the content as if it was in its correct position.
Switching to the tab overview renders the video correctly.
Here's a few screenshots to demonstrate the issue:
I have also created a JSFiddle that reproduces the issue, with markup directly out of the project. Visit it on mobile Safari on iPhone or with a simulator on macOS to see the problem in action. (Use this link for fullscreen access)
Any help would be greatly appreciated.

Onetone YouTube Background Video Not Playing in Safari or IE11

I am using the Onetone (not pro) Wordpress theme, and am attempting to get the Youtube Background Video function to work. It works great in Chrome and Firefox, but not in Safari or IE11. Does anyone know if this function is supported by Safari and/or IE11, or how to make it work? Thanks!

WordPress mediaelement video sizing not responsive when viewed in Firefox

We have a problem with our WordPress. We are using mediaelement.js .
So there is a problem with the <video>-tag and Firefox. If i reduce the window size the video is not getting smaller. In Google Chrome and IE it's no problem if I reduce it there the window the video is getting smaller.
I have no idea what I can do. I tried so many things but nothing happend :-(.
So we are using the [video .... ] tag in a textblock in WordPress.
I tried for example "style: width:100%; height:100%;" but nothing happens in Firefox.
How can I ensure the video resizes correctly in Firefox?
looking at the Browser and Device support chart on the website of mediaelement.js it might be that the video you are using has a format that can play via html5 video in IE and Chrome but not Firefox, so Firefox has to use Flash which in turn won't resize.

Why does CSS 3d animations work on safari and not chrome if they are both build using webkit?

I was wondering why the CSS 3d animation work on safari (desktop/ipad/iphone) browser but not on latest chrome 9.0. Aren't chrome and safari both based on the webkit platform???
Also, how can I stay in the loop with Chrome (desktop/android) browser and their plans to support CSS 3d in the future?
Link is here: http://girliemac.com/sandbox/flickr_3d.html
Thanks.
EDIT: For those of you who says it works on Chrome, can you please try it on safari? It looks like it works on Chrome but it REALLy works on the latest safari or get the nightly build.
I use chrome 9.0.597.107; chrome disable 3d animation by default.
so, if want enable it, just open a new tab, access the page : about:flags
In that page, make sure enable the GPU.
restart the chrome , then you should see the 3d animation .

css rollover buttons- great in safari,and firefox/ ie but not chrome?

i've been trying out a bit of code posted to make image rollover buttons using only css,
this seems to work fine.
local testing showed no problems, IE, Firefox, safari all ok. even chrome displays as intended on the local version.
Once i move to a hosted test, IE, Firefox and Safari all display as intended but chrome offsets all the buttons right about 8-10 pixels.
here's the test page
http://www.fierysurprise.pwp.blueyonder.co.uk/bga/bgd.html
can anyone enlighten me as to what's happening?
site built in Kompozer
I assume you're referring to the squares under the "architectural design..." phrase.
I can't recreate this problem in Chrome v5.0.375.125.
What version of chrome are you using? Chrome tends to doggedly cache resources. Have you tried a cache refresh?
What version of Chrome are you using? I looked at your site in Chrome 5 and can't seem to tell a difference between any of the browsers you've mentioned.

Resources