I want to embed a .webm video in my website. At first I used .gif, but I wanted to speed up my website, so I followed the advice from Lighthouse to use .webm in my website. This reduced the size enormous, but due to the lack of support on Ios/OSX/Safari, I show the .gif on that devices.
Webm is supported on chrome, on my desktop it shows perfectly. But when I view it on android in chrome the background of the video is black instead of transparent. You can view it here: https://codepen.io/Vendio-Websolutions/pen/jdpveV. I added buttons for different background colors to make the problem more clear.
html
<div class="buttons">
<button id="blue">Make background blue</button>
<button id="green">Make background Green</button>
<button id="red">Make background red</button>
</div>
<div class="video-div">
<video autoplay="" src="http://vendio.offline/wp-content/uploads/2019/01/webdevelopment.webm" alt="Webdevelopment" muted="" style="background-color: transparent; opacity: 1; filter: blur(0px); z-index: 1; display: inline;"></video>
</div>
css
.buttons {
display: flex;
}
.buttons button {
background: black;
color: white;
border: none;
padding: 10px;
margin: 10px;
cursor: pointer;
}.video-div {
padding: 30px;
}
js
$("#blue").click(function(){
$(".video-div").css("background-color", "blue");
});
$("#green").click(function(){
$(".video-div").css("background-color", "green");
});
$("#red").click(function(){
$(".video-div").css("background-color", "red");
});
I tried to use this script to detect the support for the transparent alpha layer: How to (feature) detect if browser supports WebM alpha transparency?. But this only detects if the browser supports .webm not if it supports tranparency.
Does anyone know how I can make the video transparent on chrome in Android. Or does anyone know a script to detect if alpha layers are supported?
Related
So here is the problem I am facing: the website layout in my phone doesnt look the same as I saw on the browser with responsive viewport turned on.
I was looking at the similar questions posted on this forum like this (meta tag problem)
I am self-learning web development and working on a simple website of the game "paper, scissors, rock".
I draw the framework with HTML.
The paper, scissors and rock logos are svg injected by javascript so I can fill it with different color.
The svg styles are done in css.
The combat part would be done in javascript but now I am confused by the layout problem.
So what I expected from desktop(windows) google chrome is like this:
chrome app view
my firend's Android phone google chrome view:
android app view
but what I get from my iphone google chrome:
iphone app view
I think the css and javascript thing would not be a critical point because it works fine on desktop and android phone.
I think it would be a tag problem but I am not able to find answers others mentioned before.
I dont know if it is the difference between ios and android.
I have faced similar issues before. I had tried to create a circle button with purely css (not img or svg). It shows perfectly in desktop web browser and my friend's android phone. But it shows a ellipse on my iphone.
Here is the code I used to create the button:
HTML:
<button id="master-button" type="button" onclick="AddContent(this)">
<div class="button-cross"></div>
<div class="button-cross rotate"></div>
</button>
CSS:
#master-button{
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: var(--white);
border: none;
font-size: 50px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.button-cross{
position: absolute;
top : 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 5px;
height: 30px;
background-color: var(--high-light-main);
}
.rotate{
transform: translate(-50%,-50%) rotate(90deg);
}
Iphone view:
iphone app view
Android:
android app view
Desktop:
desktop app view
I thought it was caused by the different programming language by android and ios. So I thought it will only shows error if I use Safari. But it turns out even I use the same browser (google chrome), it still shows difference on the screen.
Do you guys have any thought about the issue? Do any of you have faced this issue and finally have a solution on it?
Please let me know and discuss more about it. Thank you for the community.
I'm creating a menu that has elements underlined with a gradient line. The gradients display fine on desktop and in Chrome for Android, but don't show in Firefox for Android. I used the Firefox WebIDE to debug the error.
Here's my code:
<div class="menu">
<div>Menu1</div>
<div>Menu2</div>
<div>Menu3</div>
<div>Menu4</div>
<div>Menu5</div>
</div>
.menu > div {
position: relative;
cursor: pointer;
text-align: center;
}
.menu > div:after {
content: "";
position: absolute;
bottom: -0.05vw;
left: 5%;
width: 90%;
height: 0.05vw;
background-image: linear-gradient(90deg, transparent, white 25%, white 75%, transparent);
}
On Chrome for Android it's very thin, just as I'd like.
It seems that 0.05vw is too thin to for FF for Android to display, because from 0.13vw and up it starts to show, but it's too thick that way. calc(0.4px + 0.05vw) shows and it's a little better that way, but still too thick.
If I ditch the gradient in favor of a solid white background, it shows and is thin, so currently I'm using that as fallback, though not ideal.
Phone is a Galaxy S4 with FF for Android 67.0.3.
Is there a way to make it display, or do I need to solve it in a different way?
Before anyone thinks this is a simple question or is a possible duplicate, please read the full post.
I'm developing an Android application and have implemented a WebView to act as part of the application. The WebView shows content from a website which is made with bootstrap and is mobile friendly. However, the CSS messes up here and there and as a result, the entire application looks odd and elements seem to be 'out of place'.
For example, I place a box and some text inside a container and place it specifically using CSS margins. Like below:
.testcontainer {
border: 1px solid red;
height: 50px
width: 100%;
}
.testcontainer .box {
height: 50px;
width: 50px;
background-color: blue;
display: inline-block;
vertical-align: top;
}
.testcontainer .text {
font-size: 16px;
display: inline-block;
vertical-align: top;
border: 1px solid blue;
}
<div class="testcontainer">
<div class="box"></div>
<div class="text">Testing</div>
</div>
Now all is good on a MacBook Safari and Opera browser and the text's border is pixel perfect and is aligned with the top of the blue box etc. However, on the WebView inside the application, the text is around 2px off and in some cases, 5px and so on. Why? I've tried to use em instead of px for font-size but the same issue occurs. What am I missing?
I'm developing a web based app. I load a page on an android WebView.
The issue is, I set a wave border effect to a div using css3 radial gradient, the page shows correctly on most browsers, and works fine for iOS version app as well. But on the android app, If I add this style, the page will totally become blurred. I paste my css code here:
wave-l:before{
display: block;
position: absolute;
content: '';
top: 0px;
left: -4px;
height: 100%;
width: 4px;
background-position: 0px 0px;
background-size: 4px 8px;
background-image: -webkit-radial-gradient(100% 4px, circle, $color 4px, transparent 4px);
background-image: -moz-radial-gradient(100% 4px, circle, $color 4px, transparent 4px);
background-image: radial-gradient(circle at 100% 4px, $color 4px, transparent 4px);
}
This css will generate a left wave style border. The blurred pages shown on android WebView is as shown below:
I'm quite sure it's this css code snippet caused the issue. So anybody know the solution?
Add the code
android:hardwareAccelerated="false"
in the AndroidManifest.xml webview used activity.
It is too late to respond, but I was also getting the blurred issue in webView. I resolved it by adding
webView.getSettings().setJavaScriptEnabled(true);
It may help somebody
I am developing an HTML5 web application for mobile devices and ran into a bit of trouble with smooth animations.
Essentially, when a user taps a button, a drawer (a div with height: 0px) should animate to a given height (in pixels) and content will be appended to that drawer. If you have a Pinterest account, you can see the animation as it is now, at http://m.pinterest.com (tap the Comment or Repin button).
The unfortunate problem is that on mobile devices, Webkit Transitions aren't hardware-accelerated the height property, so its extremely laggy and the animation is jagged.
Here are some code snippets:
HTML:
...
<div class="pin">
<a class="comment_btn mbtn" href="#" title="" ontouchstart="">Comment</a>
<div class="comment_wrapper">
<div class="divider bottom_shadow"></div>
<div class="comment">
<!-- Content appended here -->
</div>
<div class="divider top_shadow" style="margin-top: 0"></div>
</div>
</div>
<div class="pin"> ... </div>
CSS:
.comment_wrapper {
-webkit-transition: all 0.4s ease-in-out, height 0.4s ease-in-out;
position: relative;
overflow: hidden;
width: 100%;
float: left;
height: 0;
}
.comment {
background: #f4eeee;
margin-left: -10px;
padding: 10px;
height: 100%;
width: 100%;
float: left;
}
Javascript (using jQuery):
function showSheet(button, wrapper, height) {
// Animate the wrapper in.
var css = wrapper.css({
'height': height + 'px',
'overflow': 'visible',
'margin-bottom': '20px',
'margin-top': '10px'
});
button.addClass('pressed');
}
$('.comment_btn').click(function() {
showSheet($(this), $(this).siblings('.comment_wrapper'), 150);
});
Screenshots : http://imgur.com/nGcnS,btP3W
Here are the problems I encountered with Webkit Transforms that I can't quite figure out:
Webkit Transforms scale the children of the container, which is undesirable for what I'm trying to do. -webkit-transform: none applied to the children don't seem to reset this behavior.
Webkit Transforms don't move sibling elements. So, the .pin container after the one we're operating on doesn't move down automatically. This can be fixed manually, but it is a hassle.
Thanks a lot!
With mobile phones being so fast it's easy to forget they are actually pretty humble devices when you compare them to desktop hardware. The reason why your page is slow it because of rendering reflows:
http://code.google.com/speed/articles/reflow.html
When the div grows, it has to push and recalculate the positions of all the elements, which is expensive to a mobile device.
I know it's a compromise, but the only way you can make the animation smoother is by putting position: absolute on .comment_wrapper; or if you really want butter smooth animation, make it pop up from under the screen with css transforms, i.e.
.comment_wrapper {
height: 200px;
position: absolute;
width: 100%;
bottom: 0;
-webkit-transform: translate(0, 100%);
}
var css = wrapper.css({
'-webkit-transform': 'translate(0, 100%)'
});
You want traslate3d. Should use the GPU if the device supports it.
check this out...
http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/