Latest Version of Chrome Broke fix background? - javascript

i am using stellar.js and also am using background-attachment: fixed. However, that scrolling effect which was produced suddenly stopped working in Google Chrome. Here's a link to the
site.
When i try to preview my website in version 45.0.2454.85 m background attachment wont work to any of my background pictures. However it works in firefox, edge and others. When i tried a version below 45 it also worked just fine.
here's how i typically create my background images
CSS
.intro {
background-image: url(/img/banner-bg.jpg);
background-repeat: no-repeat;
height: 100%;
background-attachment: cover;
background-position: center center;
background-size: contain;
}
HTML
<section class="intro" data-stellar-background-ratio="0.5"> </section>

It seems that to make it work for this version i had to take out the overflow-x:hidden property from:
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
Otherwise my images won't stay fixed at this Chrome Version for a reason i don't know.

Related

Scrolling/loading issues Google Chrome/Opera

I've been working on my website and it works flawlessly in Firefox and Safari (also no scrolling issues with IE), but it's opened in both Opera and Chrome the site keeps reloading every area every time you scroll a little bit so when you've loaded an area, you scroll to a new one (which loads strangely) and back again to the first location it reloads everything again. I found that the problems come from the background that I use, but once again, in half of the browsers it works flawlessly. Does anybody know how to get this code to work? I've tried changing the absolute attachment property to both fixed and relative but fixed only makes the site work more terrible and relative does the same as absolute.
Or... is it possible to add css specific for Firefox, IE and Safari to make sure it works there and delete the background image in the other browsers?
.div-1{
background: url(../images/blue1.png), url(../images/background.jpg);
background-attachment: absolute, absolute;
background-position: left bottom, right top;
background-repeat: no-repeat, no-repeat;
background-size: cover, cover;
background-color:#000;
color: #fff;
text-align: center;
padding: 10% 10% 30% 10%;
border-bottom: 5px #000;
}
.div-2{
background: url(../images/blue1.png);
background-repeat: no-repeat;
background-size: cover;
background-attachment: absolute;
background-position: left bottom;
background-color:#000;
color: #95C8D1;
text-align: center;
padding: 10% 10% 30% 10%;
border-bottom: 5px #95C8D1;
margin-top: -2px;
}
.div-3{
background: url(../images/black1.png);
background-repeat: no-repeat;
background-size: cover;
background-attachment: absolute;
background-position: right bottom;
background-color:#95C8D1;
color: #fff;
text-align: center;
padding: 10% 10% 30% 10%;
border-bottom: 5px #000;
margin-top: -1px;
}
It's about the site: http://cdmolenaar.nl/en/
The main problem you're facing is that your page (images, video) is massive (24MB). Chrome is redrawing the images when they enter the viewable area. I'd recommend:
I see you are loading a bunch of images that are not visible on the page.
None of your images are optimized/resized. When saving your images, try not to make them so much larger than they appear in the page.
The angled color pngs could probably be achieved with CSS or SVG. (Take a look at: http://apps.eky.hk/css-triangle-generator/)
I can't tell you why Firefox and Safari are so much better (except they render differently). The images aren't technically reloading, but they do need to be decoded and painted to the page on scroll. Some general info about scroll Jank can be found here: http://jankfree.org/

Mobile - body:before background image briefly breaks when scrolling

When I scroll on my website there is a white bar at the bottom of my background image. The image is attached to body:before {}. I have tried a variation of CSS settings and tricks to circumvent this but I can't seem to get around it. I even tried having the image overflow 110vh to prevent the white-space but that also failed.
Example of the issue below. Perhaps this is strictly iOS related? I am using iOS 10 and I have tried both Chrome and Safari and the issue persists on both.
Here is my website:
Here is my CSS:
body:before {
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
min-width: 100vw;
min-height: 110vh;
z-index: -10;
background: url(../css/images/brotherhoodSmall.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Any suggestions for this one? I've already had to use this crazy body:before workaround because background-attachment:fixed doesn't work well on iOS mobile devices.
Thanks

CSS workaround for iPhone responsive design bug

I've created a new page for our social club and have some problems with it. It's a responsive site with one-page design. On the intro section, there's just a background image with a simple logo.
Now everything looks good on android and most pc browsers, but somehow the iphone browser shows the background image zoomed.
Does somebody know an workaround for that?
You can try it yourself on http://juku-tbg.de/
Chrome Screenshot: -> OK
Iphone Mode on Chrome: -> OK
Screenshot from android device: -> OK
Screenshot on an iphone 5s: -> NOK
Thanks a lot.
background-attachment: fixed is bugged in mobile Safari. For a fix use a seperate container and apply position: fixed to it instead.
#bg {
background-image: url('path/to/img.jpg');
background-attachment: scroll;
background-position: center top;
background-repeat: no-repeat;
display: block;
width: 100%;
min-height: 100%;
z-index: -100;
position: fixed;
top: 0;
left: 0;
}

Problems with logo not appearing on background image

I used photoshop to layer a logo over a background image. I have the background image set up that it is responsive. I set up a image map to use the logo as a main page link. I works well on two of the other pages of the site but this page is different because of the way the background image is set up. I thought I could play a trick by using a transparent image along with usemap. did not work. I am able to see the hand when I hover over the image map, but there is no logo there. the url is http://jandswebsitedesigns.com/test/index.html. an example of the logo on the upper left hand corner is http://jandswebsitedesigns.com/test/im-new-here.html. I had a similar problem with the im-new-here page. The "top-bar" div (which is transparent) that is on top of the upper part of the image, was covering the clickable area. Samuel responded and I added div#top-bar { height: 0px; } and it fixed it. worked nicely, but the same fix won't work here.
<style>
body {
background: url(images/cd-background-1.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
min-height: 100%;
z-index: 1; }
</style>
<div style="text-align: center; height: 800px;">
<img src="images/trans.png" usemap="#logomap">
<map name="logomap">
<area shape="poly" coords="11,2,430,3,432,307,3,320"
style="outline:none;" href="index.html" alt="main page">
</map>
</div>
An image background may not appear if height and width are not set for the element that containing it
html, body{
width:100%;
height: 100%:
}
.my-div{
display: block:
width: // must give width
height: // must give height
background-image: url('...'):
}
First of all, I would recommend not using usemap, since it would make it harder to port your site to a mobile audience.
A better approach (which I personally use a lot and which would work on the design in question) is to make a div with full width and a given height, and to add the logo inside of it.
The HTML would look something like this:
<div class="header">
</div>
The CSS could then look like this:
.header {
background-image: url(...);
background-position: center;
background-attachment: fixed;
background-size: cover;
display: block;
height: 800px;
}
.header .logo {
width: 400px;
height: 300px;
display: inline-block;
background-image: url(...);
background-position: center;
background-repeat: no-repeat;
}
It's something different from your current approach, but would fix your problem with the logo.
EDIT: I've put up a little fiddle about the problem, to give more context in case necessary.

How to fix nav-bar position?

This is my Personal Webpage. Try both Chrome and Firefox. The intended effect is rendered only on firefox (only for the homepage portion).
However when I scroll down and scroll back up to the homepage,the image disappears. Why is this happening and how may I solve this?
Also,How can I render the homepage parallax scrolling effect in Chrome?
Related Code:
HTML:
<section class="featured">
<div class="container">
<div class="row mar-bot40">
<div class="col-md-6 col-md-offset-3">
<div class="align-center">
<div class="team-member">
<figure class="member-photo1" ><img class="works" src="img/Work/me.jpg" alt="" /></figure>
</div>
<h2 class="slogan" style="color:white;">name<a style="color:white;font-family: 'Lobster', cursive; font-weight:normal">.com</a></h2><h3 style="font-family: 'Shadows Into Light', cursive; color:#A2F1FE; font-size:35px;"><strong>Inspired by <a style="color:#FF2744">Purpose</a>.<br>Driven by <a style="color:#FF2744">Passion</a>.</strong></h3>
</div>
</div>
</div>
<div class="row animated opacity mar-bot20" data-andown="fadeIn" data-animation="animation">
<div class="col-sm-12 align-center">
<ul class="social-network social-circle">
<li><i class="fa fa-envelope"></i></li>
<li><i class="fa fa-github"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-stack-overflow"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
</div>
</div>
</div>
</section>
CSS:
section.featured {
padding: 200px 0 255px;
background: url('homepage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #fdfdfd;
}
section.featured h2.slogan {
color: #ffffff;
font-size: 48px;
font-weight: 900;
}
/* inner heading */
section.featured.inner {
background: #eee;
padding: 150px 0 50px;
}
#solved it!
I have noticed very strange behavior that when image is not showing!
Try to resize you browser a bit and boom! it will show you background
image! (this might be a hint where we can focus)
Try to longhand the shorthand properties!
I have just simplified your short-hand properties!
then i have removed background-attachment: fixed; (and that was creating the problem)
But i have just checked in inspect elements 3-times and its working!
By removing background-attachment: fixed; property and load page again!
just use these css:
section.featured {
padding: 200px 0 255px;
background-image: url('homepage.jpg');
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #fdfdfd;
}
And for the performance issue i have noticed that
you have used so many fonts links (font-awesome twice and around 15! Thats too much)
around 300 lines of embedded css!
try to minify js,css and html and reduce http-request!
website is very slow due to 79 http request!
#For Header issue!
I have analysed your code and its overriding css rules that why your
header is not looking as you want!
for that i have removed some css rules!
please remove this rules, i think that will solve your problem!
After removing some css header will look like this
![header][2]
#For the header Links
Firts of all remove all inline styles for links
Now add this css to your stylesheet!
.navbar .nav>li>a {
font-family: 'Lato', sans-serif !important;
padding: 10px 15px 10px;
color: #fff !important;
}
.navbar .nav>li>a:hover {
color: #ccc !important;
}
Active Link Code Modification!
Here is the steps for active link color background issue!
For active Color Link Activation please make sure that when you click
on linnk its <li> becomes <li class="active">, Then and only then
it will become active red!
#Final Retouch! Working Parallax Effect
section.featured {
padding: 200px 0 255px;
background-image: url('homepage3.jpg');
background-repeat: no-repeat;
position: static;
background-position: inherit;
background-attachment: fixed;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
color: #fdfdfd;
}
![staaaaaaaaaaakkkkkk][6]
#Goodluck
Your HTML is off. The side effect of that is it confuses the javascript.
Think of HTML as a skeleton, it should be symmetrical, if it's asymmetrical one side will be bigger than the other which causes numerous internal problems. You wouldn't want 5 fingers on one hand and only 3 on the other.
You have 174 opening <div> tags but 178 ending tags. On top of that you have 13 opening <section> tags but 15 ending tags. I surmise that the error was made due to the commented out sections of code. I suggest using an IDE (Notepad++ or NetBeans) that points out simple mistakes (via colored underlining). Simple mistake, like a missing semi-colon, that could have been prevented.
Heed W3C standards, they're there for a reason. This W3C report strengthens my hypothesis; fix your HTML errors and your problem should be solved.
Firefox and Chrome looked the same to me, so not sure what it is that you want to achieve exactly.
If it is the logo's disappearance from the top navbar, I think that has to do with the line-height:50 property.
But I think you want homepage.jpg to be on the background all throughout the page, then you need to move it into body style or you need to create some other div to hold the rest of the page or where you want it to be shown.
You may need to isolate your problem into its own stripped down html version and once you fix it, you may still need to start adding other parts incrementally if there are still other errors when you merge.
Remove the -webkit-backface-visibility: hidden; (animate.css line 14). The -webkit- prefix "breaks" the effect in chrome. Actually it creates a new overlaing static image.
After investigating I believe the root of the problem lies with the way position fixed is being used on the section featured background image.
Position fixed is not working as per the W3C specification in Google chrome which is also why the parallax scrolling effect is failing to work in Chrome.
Simply REMOVING FIXED from your background position should resolve the problem of the image disappearing on scroll.
CHANGE FROM
section.featured {
background: url('homepage.jpg') no-repeat center center fixed;
}
TO
section.featured {
background: url('homepage.jpg') no-repeat center center;
}
When the background is set as fixed, it is similar to putting a fixed 'div' in the background and setting the original div background to be transparent.
This is actually a bug in Google Chrome.
(Despite its popularity Chrome still does not comform to web standards as well as firefox.)
RESOLUTION
Although I have been unable to test this with your website their is a workaround for this bug.
Setting the 'position' propery of the element AND ALL parent elements as 'static', or if you have given it some other value, namely 'relative', 'fixed' or 'absolute', just remove those.
If the element or any container element, including: body & html has any position property other than static the bug will occur.
Additionally:
Ensure that backface-visibility: hidden; is not set on the element or any of its containers, including: body & html.
ALTERNATE SOLUTIONS
One alternative is to use the css clip function to create a similar effect.
CLICK FOR DEMO
Demo by Daniel Perván
.element {
position: relative;
height: 400px;
}
.clipper {
position: absolute;
clip: rect(auto,auto,auto,auto);
width: 100%;
height: 100%;
}
.image {
background: url(http://image.jpg) no-repeat 50% 50%;
background-size: cover;
position: fixed;
width: 100%;
height: 100%;
top: 0;
}

Categories

Resources