I have a parralax scrolling CSS implementation which works perfectly well for Safari and Firefox, but not Chrome.
The style to achieve parralax scrolling:
#somediv {
background: url(../assets/img/someImage.jpg) no-repeat fixed;
background-position: center top;
}
This style is being applied to a el.
Strangely, when I refresh the page at a section where the fixed background image should be, it appears, only for that particular section. When I start scrolling to see where I have set the other fixed backgrounds, they don't show until I refresh.
I've noticed users having performance issues with their parralax scrolling on Chrome but I'm not at that stage, just need it to work.
Any help is greatly appreciated.
Related
I have a div which has a background property on it. The background is a url which loads fine on all computers and browsers, loads fine on Android but doesn't load on iPhone.
Here is the style for the div:
background: url('http://emergypower.com/assets/images/attraction.png');
background-position: center -90px;
height: 590px;
width: 100%;
This is custom CSS, I am not using a framework for it. Furthermore, when the user opens the "tab view" on iPhone (to see all the Safari tabs that they have open) the image displays fine, however when opened in the real browser view it does not display.
I originally did not have the width set and thought that this may have caused the problems but have since edited it and it has made no difference.
Ethaan might be right but I prefer to use background-size: 100% cover; to ensure the image is always sizing to it's container.
It think I might have three possible solutions. It might depend on which iOS version you’re testing on.
An old fix for a bug with background-image on older iOS devices was to add -webkit-transform: translateZ(0); to the element.
Some older iOS versions has an image file size limit off 2290x2290px. Is the image to big?
Adding position: relative; and background-repeat: no-repeat; might do the trick.
Try changing the background to this.
background: url("http://emergypower.com/assets/images/attraction.png");
background-size: cover
add background size
background: url("http://emergypower.com/assets/images/attraction.png");
background-size: 100% 100%;
I'm building a Grid with background images but things go wrong in Safari.
(Safari 7, 6 and 5, tested in Browserstack )
This is the website. As you can see in Chrome, FF or IE there's a grid with background image set inline.
http://fourseasonsrally.com/1
In Safari I sometimes see the background image but then it suddenly disappears.. I could not reproduce the error in other browsers.
This is what the grid looks like on chrome
UPDATE 1: Shorthand CSS
It seems that shorthand css is ignored by Safari, I removed all the shorthand properties but the problem persists.
Any idea what might be going wrong?
Thanks!
You mean header logo (FOURSEASONS RALLY) not visible in safari - changes the below css.
present css:
.header {
background: url("../img/logo.svg") no-repeat scroll center center / contain #111;
}
remove the " / contain"
.header {
background: url("../img/logo.svg") no-repeat scroll center center #111;
}
I have made a responsive webpage which has a logo in center position. I could do it using the css such as logo {width: 615px; margin: 0 auto} which works well in firefox and opera browser. But it doesn’t work well in chrome browser. It moves slightly left in chrome browser. I want that the logo always display in center position (Desktop and Mobile) on firefox, opera and chrome. How could I fix it? For your kind information, there has some contents in right side of this webpage.
Demo: https://dl.dropboxusercontent.com/u/211935016/mobile_responsive/index.html
Remove the overflow: hidden which you don't really need for the logo. That should solve the issue.
.fix{
overflow: hidden;
}
I'm building a website that uses fixed background images to transition between sections. Currently, it is pure CSS. The effect works on every browser that I've tested it in, except for one: Chrome on Mac (Version 33.0.1750.146 or Version 34.0.1847.45 beta). Seems to work fine on Chrome on PC.
What happens is pretty strange...on scroll, the image is repeated and overlayed and overall very distorted. After a bit more scroll, it disappears. It does not reappear on scroll up.
Any ideas or solutions?!
Current page: http://margusity.com/follies-beta
Current screenshot (broken, chrome): http://cloud.ikilledtheinter.net/ULra
Current screenshot (working, safari): http://cloud.ikilledtheinter.net/ULxH
Seemingly relevant CSS:
.chris, .eric, {
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
position: relative;
z-index: 50;
width: 100%;
height: 100%;
}
.chris {
background-image: url(../img/people/chris.png);
}
.eric {
background-image: url(../img/people/eric.png);
}
Edit: It seems to be the fixed background element that is causing the issue. Removing "position:fixed" from #behind (css not shown above) fixes the issue above, but does not solve my requirements. Working on a solution now!
I'm running into this same issue. It looks like your site is working now, can you share your solution?
EDIT: Removing position: relative; and setting the html and body to both have height: 100%; solved my problem.
Switching an unnested position:fixed element out fixed the problem. I'm not sure why.
To fully solve the problem, I set the body to contain an attachment:fixed background image that the other elements all scrolled over, with their respective attachment:fixed background images. I would however like to know why the original failed in only Chrome on Mac on some browsers, yet worked everywhere else -__-
Chrome 38 Canary, Windows 8.1
Same Error: http://puu.sh/aOKEH/77538a9a01.jpg
Many other Pages bug out too.. (Twitter Fixed Background for example)
I know questions like this have been asked here, but a lot of the existing questions have answers that are now outdated. What I am needing is the following: a web page with preferably only CSS and HTML that has a fixed and centered background image. The dimensions of the background image that I am using are 1024x1024 with the idea being that the image will cover the screen in landscape and portrait modes. The background image must also be fixed, meaning that if the content on the page is scrolled, the background image does not scroll with the content.
I have a solution that nearly works:
CSS:
#background {
background-image: url('background.jpg');
background-position:center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
position: fixed;
z-index: 0;
}
HTML:
<body>
<div id="background"></div>
<!-- content here -->
</body>
This solution works fine in portrait mode; fixed and centered are both working fine. But when I turn the ipad into landscape mode, the background image does not immediately resize to fill the new width, insead it shows a white vertical stripe on the right-hand side. When I scroll the content, then the background image resizes and fills the width correctly.
Does anyone know why the resize of the background is only happening when the page content is scrolled and does anyone know how to get this working correctly? I am only interested in this working in iOS 5, so the answer does not have to take other browsers or iOS 4 into account.
I think I can help. I am also new to mobile design, but encountered problems with white-space in mobile Safari immediately...
Try using the CSS properties min-width and min-height at 100%, or the size of your background image in pixels. This should force the viewport (which is what renders the white space) to adhere to the size of your background image consistently (in landscape and portrait).
Additionally, you might also try applying margin: 0 to the HTML or BODY elements.
Hope it works!
P.S. You might require this tag as well in your HTML:
<meta name="viewport" content="width=device-width">
But again, I'm new to this so I'm not sure if it is necesary.