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
Related
I'm trying to work with a responsive Bootstrap carousel, but for some reason, I seem to be getting a 'scroll' on mobile. Can someone please make a suggestion with this?
The link is here: https://mydigitalmidlands.co.uk/vogue-interiors.co.uk/
The slide images are set as backgrounds, and CSS is below:
.carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
it seems to be the height property '100vh' which is the problem. if i lower this, we get a white border on the bottom.
is there any way to make the carousel slides responsive, without the scroll or white gap?
(For a Javascript workaround see bottom of answer)
It looks as though you are bumping up against the vh ‘fix’ which I believe is now implemented at least on iOS and Android.
That is they set the vh so it does not change when the user scrolls vertically as they were otherwise experiencing a jump effect when they scrolled and part of the browser bar at the top disappears as the viewport height then changed. I guess fixing it to a value so that it did not change even when the viewport changed was a sort of compromise.
The only way I Have got round it so far is to set the height a bit less than 100vh. I’ve been lazy and kept it like that for all sites so some see a taller footer than they otherwise would. Would be good to hear of a proper CSS way of doing it so those on
devices with variable vh get the footer without a line or so extra It uses CSS variavpbleswhite.
I realise this isn’t a full answer as it doesn’t give a perfect workaround, but it was too long for a comment.
Update: there is a Javascript workaround described in https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
After your height: 100vh Put another line
height: calc(var(--vh, 1vh) * 100);
And have this JS run on load (and on resize for if the user changes the device orientation
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`)
This may seem a little to easy and may not work for you but I had the exact same issue a few days ago and all I did was set the width to auto and it worked and the scrollbar was gone on smaller screens:
width: auto;
I am using background Image by applying below css on main body element in my UI.
.homepage-bg {
margin:0;
padding:0;
background: url("#{imagePath}/homepage/bg.jpg") no-repeat center fixed;
-webkit-background-size: cover; /* pour anciens Chrome et Safari */
background-size: cover; /* version standardisée */
overflow-y: auto;
}
I am facing issue of image compression on Chrome browser on Android devices. (Works fine in firefox)
I have searched on internet regarding this and found some solution like applying pagespeed_no_transform but it didn't worked for me.
I am attaching screenshots of chrome (Not working) and firefox (Working)
Any help please?
Thanks
EDIT:
I tried adding min-height:<SOME GOOD VALUE> (Ex. 600px, 800px) And now the image is stretched to whole page. (ScreenShot Attached below)
My question is why i can't simply apply min-height: 100% in which
image should take full height?
Ok so after doing some troubleshooting, below css done the trick for me.
min-height: 100vh;
On my new webpage (http://patrick-ott.de/ -- it is getting there ;), I seem to have encountered a problem. At the very end there is a promise for a non black/white-version but it does not show the fully colored image. That is fine, I do not want the background to scale in width (or maybe when the resolution of the display exceeds the one of the image) but I do want to see the full-length version of the background, so essentially you can keep scrolling longer. Any ideas on how to do this smart? Right now the CSS for the background is as simple as this:
.colorbox {
background-image: url(pictures/colorbackground.jpg);
height: 100%;
width: 100%;
position: relative; }
set background-size
background-size: 100% 100%;
Add this to your CSS:
background-repeat: round round;
That should do the trick. But this is a pretty new feature in CSS so it will work if you expect your users to be using IE9+ and other modern browsers.
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
This is a particularly strange request, but the client won't budge.
I've almost got what I need currently with:
#main_content, .slide {position: relative; min-width: 1200px;}
.slide_layer {position: absolute; height: 100%; width: 100%; top:0; left: 0; min-width: 1200px; padding-bottom: 18px;}
.slide_layer img { width: 100%; }
Problem is, if my browser window is longer than it is wide, I end up with empty space below the image. What the client wants is for the image to fill all available height if there is room and create horizontal scrollbars as needed (rather than crop).
The solution I'm thinking of doing is just detecting browser window and stretching the .slide_layer img to fill height via javascript. But this feels crappy and sloppy. Is there a better way?
To make matters worse, backward compatibility is required back to IE7.
Thanks!
This doesn't necessarily help you with the horizontal-overflow request from your client, but you could rebuild your slides to use a background image, instead of an image within it.
You can then use the CSS3 background-size, set to 'cover':
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
This means that the background image will stretch out - whilst maintaining the correct dimensions - to fill the parent. So, unless your slide is exactly the same dimensions as the image, you'll either have a little off the top/bottom, or left/right cut off from view, but it will always stretch to cover the entire background.
This is a CSS3 property, so won't work back to IE7 without a little help. Fortunately, CSS3 PIE can help you out there to get support all the way back to those older versions of Internet Explorer.