So, I'm having issues with a fixed background on mobile devices. When viewed in Chrome on my Windows 7 laptop, the background looks fine; the image (which is thin) tiles horizontally and stays fixed to the viewport. In Chrome on my Android phone, though, the background sticks to the top of the page, disappearing as a I scroll down.
Now, I already know these mobile browsers have a different idea of what a viewport is, and therefore background-attachment:fixed; will not work, but none of the solutions I find seem to fix anything (or maybe I'm just misunderstanding them). The general suggestion seems to be to apply a wrapper div to the page that holds the background instead, which I tried to do based on this blog post:
#wrap {
background-image: url(../img.png);
background-repeat: repeat-x;
background-position: left top;
width: 100%;
min-height: 100%; /* sticky footer */
overflow-x: hidden; /* sticky footer */
}
This does not fix my problem at all; it just messes up the fixed appearance on the laptop. Is there something I'm not understanding? I'm very new to web coding (CSS/HTML), so I think there may be something I'm just missing here.
On opera-mobile worked perfectly. In Safari iOS6 (Iphone) did not work (not sure if it's a browser crash or code).
I recommend to use this iScroll4:
http://cubiq.org/iscroll-4
or iScroll5 (beta test):
http://cubiq.org/iscroll-5-ready-for-beta-test
Related
Codepen: https://codepen.io/Bobby__K/pen/eYZXQKo
I made a navbar with the encompassing nav given position: fixed.
.main-nav {
position: fixed;
z-index: 10;
left: 0;
top: 0;
padding: 0 5%;
height: 100px;
background-color: white;
width: 100%;
}
When I run this on Chrome, Firefox, and Firefox mobile, it works as intended; i.e. the navbar doesn't move and stays at the top. However, when I run it on Google Chrome mobile and scroll down, the navbar goes up a bit and then the fixed positioning seems to kick in. The problem here is that this cuts off a good 10% of my navbar.
Since this only happens when I preview Google Chrome's mobile view, I was wondering if this was just a visual bug shown in developer tools, instead of something that would happen once the website's live.
Notes:
I've made it responsive using the input method and with CSS :checked. As such, I usually keep the checkbox to the side with overflow-x hidden. I've tested the project while having the checkbox on the screen, but the same problem happens, so that wasn't the problem.
I've also tested this on Opera mobile view and Brave mobile view and the scrolling issue happens there too; so maybe this is something to do with how my code reacts to the Chrome Engine?
I've narrowed it down to a weird interaction with my #media screen and query. Whenever I make a change, it fixes the problem. However, once I close developer tools and reopen it, the scrolling issue reappears.
do you happen to have a codepen or something with the full html and css (and js if applicable). I'm wondering if there's a conflicting style outside of .main-nav that's causing this.
Sorry for my poor English. The code may describe better.
#wrapper{
display:flex;
}
#wrapper img{
width:25%;
}
<div id="wrapper">
<img src="https://www.hellocoolguy.com/t/1.png" />
<img src="https://www.hellocoolguy.com/t/2.png" />
<img src="https://www.hellocoolguy.com/t/3.png" />
<img src="https://www.hellocoolguy.com/t/4.png" />
</div>
I have a div#wrapper using display:flex, the img has 25% width, so the images can tile in a row.
It's ok in desktop browser, but in some mobile phones (or using chrome's DevTools to simulate), I can see gap between some images like below:
Some gaps seem to appear/disappear when I change the wrapper width. And it seems only happen on mobile. Desktop browsers (without chrome's DevTools to simulate mobile phones) always show the right result.
What's more, I found it would be ok if I use something like codepen (the code here). When using codepen it's even ok with simulating mobile phone using chrome's DevTools.
I don't know how to modify my code to let mobile phones show properly.
You may see it directly from your mobile phone here
Edited on 2019.09.27
This is happening in Wechat browser (using X5 browser as its core) , and this may be a round pixel rendering question/bug.
Finally:
Thanks for everyone who've helped. It has been still not resolved but I shall end it for it has cost us such a long time.
This is likely due to some discrepancies in pixel rounding.
To ensure the pixels are rounded correctly add the following in your head tags:
<meta name="viewport" content="width=device-width, initial-scale=1">
It's likely that Codepen automatically add this tag which is why you are unable to reproduce the issue on there.
Use background-size : cover
It will remove the space by cover your div with
the documentation
This would work:
#wrapper .img {
padding:0;
margin:0;
width:25%
}
This could be a rendering bug.
When you add background-position: right; or background-position: left; you see the problem on the other side of the your element. So the bug is that your background image with the width of 100% just is not enough to fill the box.
So you could use background-size: 101% 100%; to fix this bug. (Or
maybe 100.9% instead of 101%).
Another solution (in my opinion the better one) would be adding the same image in one box as a second background-image, but just placed on the other side.
background-image: url(sameimage.png), url(sameimage.png);
background-size: 100% 100%, 100% 100%;
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
The first background-image will be placed at the left-top-corner and the second one will be at the right-bottom-corner of your element.
In the worst case you will still have some pixels left and need to add the same image at each corner... (background-position: left top, left right, bottom left, bottom right;)
I am trying to implement the following codepen for my website :
https://codepen.io/pizza3/pen/NgXowe
When opened with chrome the background images of the slices are positionned correctly and all the slices stacked on each other will display the entire image.
However when browsing with firefox (version Qunatum 60.0.1 (64-bit)) you can notice that the background images are not positionned the same. Seems to me it has to do with the origin point of the images or something similar but I can't figure what the problem is.
I believe the relevant part of the problem is here :
.left,
.right {
position: relative;
width: 50vw;
height: 20vh;
background-attachment: fixed;
background-size: cover;
overflow: hidden;
}
Is this a firefox bug ?
In other words how can I have the same background image spread accross multiple DIVs ?
How can I solve this ?
Thanks
EDIT
Here a couple screenshots to illustrate the problem:
Chrome :
Firefox :
It looks that, though counter-intuitive, the behavior of Firefox(and Edge) is intended and correct as per spec: the transform property (used by the GSAP library for animation) makes background-attachment: fixed behave as scroll. So I'd suggest removing background-attachment: fixed and replacing it with different background-position values for each slice of the image.
May be this answer would also be relevant: https://stackoverflow.com/a/43067630/2533215
Goal: static images with animations shown on :hover that do not exceed container width.
Fixed code:
/* wrapper paragraph*/
.rimg {
text-align: center;
overflow: hidden;
}
/* rely on contents for vertical size, show backgrund centered */
.rimg-gif, .rimg-png {
display: block;
position: relative;
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
line-height: 0;
}
/* containers need max-width in IE */
.rimg img, .rimg-gif, .rimg-png {
margin: 0;
max-width: 99.99999%; /* Opera Mini ignores anything above this % */
max-width: calc(100% - 0px); /* for proper browsers */
}
/* hide the GIF background unless hovered */
.rimg-gif:not(:hover) {
background-image: none !important;
}
/* hide the static image when hovered */
.rimg-gif:hover img {
opacity: 0;
}
<p class="rimg">
<span class="rimg-png" style="background-image:url(https://i.imgur.com/iwczbln.png)">
<a class="rimg-gif" target="_blank" href="https://i.imgur.com/TLxp2di.gif" style="background-image:url(https://i.imgur.com/TLxp2di.gif)">
<img src="https://i.imgur.com/iwczbln.png">
</a>
</span>
Description
</p>
Final structure:
.rimg is just a container element for center-aligning things.
img is the static image (for semantics, printing, and default display). It is hidden via opacity when hovering, which allows to use the context menu to both get URL of GIF ("link") and static PNG ("image address").
.rimg-gif is the animated background GIF that is displayed when hovering (while hiding the static image). It is not loaded until hover. Doubles as a link to the actual GIF (for mobile users)
.rimg-png has a static background and is there solely so that the reader doesn't see the image briefly flashing before the GIF finishes loading the first frame.
There were a few issues with this:
In IE<=11 (non-Edge) sizing to fit width just outright doesn't work - the elements overflow the container instead.
Adding "max-width: 100%" to nested blocks fixed this (by this explanation).
Opera Mini similarly doesn't resize the images to fit container width, but aforementioned fixes for IE have no effect.
I was not able to find any explanations of this, but turns out that Opera Mini simply ignores max-width values roughly equal to 100% (>99.99999%). So I added that for Opera, and max-width: calc(100% - 0px) for modern browsers.
On StackOverflow's snippet preview, calculated height is slightly higher than that of image, which can be seen by it briefly starting to repeat on the bottom. The issue disappears by giving line-height: 0 to .rgif-alt but I'm not sure if that's a hack or not.
Edit: apparently so? Other options include float'ing the elements and using position: absolute, so I guess line-height is pretty alright for elements
Additional details:
HTML is generated from a markdown[-ish] extension so it does not strictly matter if it looks nasty or not. I would like to avoid having image dimensions / aspect ratio hardcoded into generated HTML if possible, though.
Trying to not have the animated GIF load until requested (mouseover), therefore a two-image trick is not preferable.
The intent to avoid JS is due to fact that pages with such elements can be shown inside an embedded browser with JS disabled completely. As you can imagine, having a popup window (or a default browser' tab) open for each animation is undesirable.
If anything is unclear, do tell.
After a bit of trial and error I managed to resolve the issues by myself, so I added notes on solutions and the final (working) code to the question.
I'm not 100% happy with opening a new tab on Android (ideally should play when single-tapping), but all tested browsers close such popup-tabs when pressing Back so maybe it's not too bad. I added a "play" button, which also doubles as a first touch event absorber for mobile (initially covers the link completely, resized to 0% width after a short delay to allow clicking the link). This works both for modern browsers (which trigger :hover and animation playback on first tap and can open link on second tap) and for Opera Mini (which simply opens a popup tab with the GIF). You can see this in action here, for example.
I'm developing a website. Everything looks great on 100% zoom but when I'm zooming in or out in chrome and IE (not Firefox) the style changes and div blocks move! I have a container div with a background and some div blocks on it. Everything should be in exact position and it is important in my site.
You can see in picture how it makes my style look so bad.
I tried to use percentage instead of pixel for sizing and positioning of all elements in the page but its not working.
My CSS:
.container{
width: 880px;
background-image: url('b80.png');
}
.picture{
margin-left:13px;
margin-top:11px;
}
I too faced the same problem, when I tested in a different screen size.
Try position: relative or display: inline-block for .picture. This may solve the issue.