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?
Related
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 have a website that requires a 'bottom right' background image alignment, along with a background colour of #000.
My css tests okay on all OS and browsers I've tried so far (chrome, ie, moz, safari) except for chrome on android, which renders the background image outside the browser window.
Other image alignments work fine - the problem seems to be only with bottom right alignment, and only with chrome on android.
Problem page url: Features a background-image: bottom right alignment
CSS as follows:
body {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 1em;
background: url("../images/bg_prices_XL.jpg");
background-size: contain;
background-color: #000;
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: fixed;
}
If I change alignment to background-image: top right; then the problem goes away.
Page renders properly on android moz. Do I therefore need to include a -webkit specific alignment?
Havd tried adding:
html,body {
height 100%;
width 100%;
}
...but no luck. Viewport size already set to device size, Chrome seemingly is rendering oitside the viewport anyway, below the footer.
Tried styling the background-image under html section of css, but didn't work.
All thoughts welcome.
I have inspected the page throught chrome dev tools. I think if you remove background-attachment: fixed; propery it will work.
...never mind folks. I made the background a fixed, 100% height and width div, with a negative z-index. It feels like a clunky workaround to me, but it seems to work. Any better suggestions though would be appreciated thank you.
For a web application I'm building I want to use the unstyled input fields as they're being rendered by Chrome. On desktop that works fine and I get nice, thin borders around the inputs, but on chrome on android the rendering of the borders is a bit fickle. Depending on the height of the page they are rendered like this
I've made a codepen with several options in order to try to get a consistent rendering, but none of them seem to work predictably: https://codepen.io/dianabroeders/pen/XabXPG
All options i tried to get the rendering right:
.input1{
transform: scale(0.9999999);
}
.input2{
border: 1px solid #a9a9a9;
padding: 2px 1px;
}
.input3{
border-image: none;
}
.input4{
-webkit-appearance: none;
}
.input5{
border-style: solid;
border-width: thin;
border-color: #a9a9a9;
}
Is there a fix to reliably render an input with all borders showing, nice and thin, all the time on chrome on android and chrome on desktop? And the width and height staying the same as an unstyled input?
PS, i found this question, that helped me understand what was going on with the rendering...
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
In the default Android Browser for older Android versions (4.1, maybe 4.2/4.3 [It is on the Android device of a customer, i'm not exactly sure which version he uses]) SVG sprites are not rendered correctly.
Instead of showing the correct clipping with the correct size, the browser shows a smaller version of the image, showing the whole sprite, like in the screenshot below (Android Browser 4.1):
Android screenshot (false rendering)
it should look like this:
Android screenshot (correct rendering)
Here's the CSS for the sprites:
.sprite {
display: inline-block;
background-image: url('img/sprite.svg');
background-repeat: no-repeat;
background-size: 1000px 1000px;
overflow: hidden;
color: transparent !important;
}
.sprite.logo {
width: 270px;
height: 55px;
background-position: 0 0;
display: block;
}
[...]
Every other Browser (including Android Browser 4.4) shows everything correctly.
This issue exists on Android 4.3- and IE9. To solve this, simply specify width and height attributes for svg tag in you file.