When I apply background to an absolute positioned psudoelement in Chrome 40.0 on Android 4.4.2 (saw it on multiple devices and versions though) it displays extra pixel line on top and the bottom of the element. Is there any way to make it disappear?
Applied styles:
.el:before{
content: "";
position: absolute;
left: 0;
top: 0;
background: url('/image.png') center top repeat-x;
width: 100%;
height: 20px;
z-index: 60 !important;
}
Here is the screenshot:
Related
I've been trying to fix this bug for days, yet I didn't find a single solution.
On certain levels of zoom (even on my phone with default zoom) I can see grey borders below some divs. I've been trying to fix this with A LOT of options including:
box-shadow
margin-bottom
outline: none
... and some other ones which I don't even remember anymore
The issue can be seen here.
PICTURE LINK
It's visible on the top of the triangle.
The whole code is available here:
https://noobish.eu/beta/
I went through your website (BTW great design) and i think i figured out a solution for your issue. You need to add a negative margin to the triangle to cover the space:
.white_triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 130px 50vw 0 50vw;
border-color: white transparent transparent transparent;
margin-top: -5px; /* Here's the addition */
}
Update:
The margin-top solution seems to be buggy, so I found another solution, which would require adding a before element on top of the border. Here's the code:
.white_triangle_container:before {
content: "";
position: absolute;
width: 100%;
height: 8px;
background: #fff;
margin-top: -4px;
border-radius: 0 0 50% 50%;
}
This is how it looks: https://i.gyazo.com/25db9e4b9db16c42d374cfd78b47736d.png
The site I am talking about is currently live. It works quite well for me. There is just one mistake that drives me crazy:
On the standard Android Browser (tested on 4.1.2, LG), the logo is stretched and resized in a very bad way. You can see a demo below.
The CSS for positioning and sizing the logo is quite simple, using position: absolute on a position: fixed element:
Markup
<div class="fixed">
<div id="logo">
<a href="logo-link">
<img src="logo.jpg" height="55" width="34">
</a>
</div>
</div>
CSS:
* {box-sizing: border-box} /* bootstrap system */
.fixed {
position: absolute;
top: 0;
left: 0;
right: auto;
bottom: auto;
height: 85px;
}
.logo {
width: 85px;
position: absolute;
top: 0;
left: 0;
right: auto;
bottom: auto;
}
img {
margin: 20px 27px;
max-width: 40px;
height: auto;
display: inline-block;
}
Working blind because I don't have that browser, but I suspect the issue will be the right:auto bottom:auto.
.fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 85px;
}
#logo {
width: 85px; height:85px;
position: absolute;
top: 0;
left: 0;
background-color:pink;
}
#logo a { display:block; width: 85px; height:85px; }
img { margin:15px 25px; }
Since the width is known, try replacing auto with the actual numbers.
Here is a Fiddle: https://jsfiddle.net/mnkx66zj/
You should also want to increase the clickable area on your link by making logo-link display block, and make it equal to parent size.
My FF DE44+ inspector says that the parent <a> is sized 0x24 and the <img> sized 240x164 (which are inline values). The parent has no z-index while the image has z-index: 1500.
It seems to me that the android browser has no width and height parent values it can reference while while the bottom: auto and right: auto forces it to do.
Further more, looking at the code of the 'live' site there is more to it than you are claiming in your question, because you give the values of the small image but the CSS of the big one (which also has left: auto, while the small one has no bottom, left, right at all).
You better take another good look at your code and revise the code in your question to reflect the code of the 'live' version, otherwise we will not be able to properly help you.
I'm having some troubles displaying my first websites on mobiles devices. When the device is vertical, the website background image does not fit the entire screen i've tried with the background-size: 100% 100% rule but does not work either. This is my css right now:
background-attachment: scroll;
background-image: url("http://qubik-design.co.nf/wp-content/uploads/2015/07/rsz_intro-bg4.jpg");
background-position: left top;
background-repeat: no-repeat;
background-size: 100% auto;
The last trouble is the footer. It does not stick to the bottom of the screen even on some PC. This is the css:
<footer id="colophon" class="site-footer" role="contentinfo">
#colophon {
background: #000 none repeat scroll 0 0;
color: #ffffff;
opacity: 0.8;
padding: 20px;
}
I tried with bottom:0px but does not work and this is all.
Thanks in advance.
To make your background image fill the entire screen you can use background-size: cover. You will also need to make the body 100% height.
body.custom-background {
background-image: url('http://qubik-design.co.nf/wp-content/uploads/2015/07/rsz_intro-bg4.jpg');
background-size: cover;
height: 100vh;
}
It, however, will not look right with the current background image. You might want to make this 2 images instead.
For the footer, assuming it is only for this site and you will not change the height, or you can change the CSS accordingly, you could make the page id 100% of the screen height and add a bottom padding that is at least as high as the footer.
#page {
position: relative;
z-index: 999;
margin: auto;
min-height: 100vh;
padding-bottom: 250px;
}
Then you can give the colofon an absolute positioning.
#colophon {
background: #000;
opacity: 0.8;
color: #ffffff;
padding: 20px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
I have images in .png and .jpg displayed inside Lightview modals that turn out blurry on Android phones. iPhones are unaffected. The size of the modals and images are being automatically set by the view port size.
HTML (Lightview builds it dynamically)
<div class="lv_window">
<div class="lv_content">
<div class="lv_content_wrapper">
<img class="lv_content_image" />
</div>
</div>
</div>
CSS
.lv_window {
position: absolute;
top: 50%;
left: 50%;
padding: 0;
overflow: hidden;
text-align: left;
-webkit-tap-highlight-color: rgba(0,0,0,0);
display:block;
/* width, height, top, and left are dynamically set depending on viewport */
}
.lv_content {
position: absolute;
padding: 0;
margin: 0;
overflow: hidden;
background: url('somegif.gif');
display: block;
/* width, height, top, and left are dynamically set depending on viewport */
}
.lv_content .lv_content_wrapper {
float: left;
clear: both;
position: relative;
}
.lv_content_image {
float: left;
border: 0;
clear: both;
padding: 0;
margin: 0;
background: none;
/* width and height are dynamically set depending on viewport in px */
}
I'm using MVC to give each image a source (src) because I have a different image depending upon what state they pick in the select. Otherwise, all CSS and HTML is created by Lightview.
I have looked through other posts like Blurry images on stock android browser because my issue is very similar, but I do not have any z-index or position: fixed set anywhere. My issue is produced on the Android default browser in version 4.0.4, 4.1.2, and 4.2.2 on both the Samsung Galaxy S3 and S4 (these details given to me by our testers).
I have tried overriding the Lightview CSS float to none for the class .lv_content_image and still no change in image quality.
I will post an example image when I can.
This is a strange bug with S3. Set these both on image tag would do the trick:
opacity: 0.999999;
-webkit-backface-visibility: hidden;
Unfortunately, the exact same method cause error on S4, and S3 and S4 have the same screen width/height, 320×640. So instead of writing pixel-accurate #media stylesheets, use:
var ua = window.navigator.userAgent.toLowerCase();
window.platform = {
...
isS3: ua.match(/gt\-i9300/i) !== null
}
if (platform.isS3) {
$('img').css{
'opacity': 0.9999,
'webkitBackfaceVisibility': 'hidden'
}
}
I am using a simple jQuery/CSS accordion panel for a mobile website (coded as a flexible design with a few media queries thrown in). It's behaving as expected in most of the browsers I've been able to test, but there is a bug within the accordion in the default browser on my Android device (Galaxy Nexus, Android 4.2.2). When I open a panel, all of the contents jump into a weird formatting layout, but if I click on another panel or close the open panel, all of the contents jump into the layout I expected them to have.
The script:
$('.accordion > .heading > a, .accordion > .heading').on('click', function () {
var $next = ($(this).is('a') ? $(this).parent().next() : $(this).next());
$next.slideToggle();
return false;
});
The CSS:
.accordion {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.accordion .slidepanel {
background: #f6f6f6;
display: none;
margin: 0;
padding: 3%;
position: relative;
}
I have tried setting the panels to be open by default and all of the formatting within is as expected. I have racked my brain trying to figure out a fix for Android -- anyone out there got some other ideas?
Simple answer found after hours of this headache:
.accordion .slidepanel {
background: #f6f6f6;
display: none;
overflow: hidden; <<---
margin: 0;
padding: 3%;
position: relative;
}
Something to do with the height and width that the .slideToggle(); needs to calculate while it's doing its magic...