I'm developing a simple react webpage, for all three of my pages I use a background image in order to display text and buttons on top of it. When testing in Chrome and Firefox, the app works perfectly. But in Safari, sometimes the image doesn't load when first entering the page, and other times it does. And after multiple refresh it is really inconsistent in the rendering of the image.
This is the first image in Bienvenida.jsx
<body className="App-header" style={{backgroundImage: `url('https://i.ibb.co/BTm5CHG/yellowbckgrnd-correct.png')`, backgroundSize: 'contain'}}>
This is the second image in Form.jsx
<body className="form-header" style={{backgroundImage: `url('https://i.ibb.co/VBDykc2/empty-yellow.jpg')`, backgroundSize: 'contain', backgroundRepeat: 'no-repeat'}}>
I use hosted the images in web because I found that it was more consistent in rendering aft multiple refresh.
Here is the link to the app: https://diademuertosfest.netlify.app
Here is the repo: https://github.com/Cosmonaut-itc/DiaDeMuertos/tree/master
I already tried to change image type, the location and web hosting the image. I expected to get a more consistent rendering of the image, but it stayed the same, the image doesn't load only after you refresh or you enter the inspect element in Safari.
I hope you can help me
Related
I am working on a hybrid HTML5, Jquery Mobile application using phonegap. I am currently having an issue with a background image I set using CSS. I have a CSS class (bPage) that sets the background image and color and all that and it seems to work right. The issue is when you navigate to a page that requires scrolling. Because the image is set to be in the center it moves to the center of the page, which is great. The problem is that the page loads with the image in the spot of the previous page and then it jumps to the middle. I want to make it move the image before the rest of the page loads so that it doens't look like the background jumps last in the page loading. Both pages have the class bPage on them and it is working correctly, except for the jumping. I assume that there is a way to force this to load earlier or something but have not been able to find a way.
Here is my bPage CSS code:
.bPage{
background-color: #6c6d6f;
background-image: url(../img/Backgrounds/Background.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-position:center;
}
Thanks in advance!
Using image sprites, not a problem, being doing it for years. But I've just noticed that they have stopped working on chrome when using an "img" tag with a "src" referencing a 1x1px transparent gif (spacer).
I use this spacer/method so that I still have alt text available for screen readers, etc. Just using a div or span tag is not really an option, I need to use the image tag.
Example CSS for the sprite:
.rec_working_backpacker{background: url("../img/recommended/working-sprite.jpg") 0 0; width:100px; height:75px;}
Example implementation of the html:
<img class="rec_working_backpacker" alt="some alt text" src="<?php echo imagePath();?>d.gif"/>
I know this is all working fine (nothing wrong with paths, etc) as it's working on all other browser, but in Chrome nothing is being displayed, it's like it is seeing the 1x1px "d.gif" and using that as the image, but taking the width/height of the sprite from the CSS (using the chrome inspector). Also using the inspector in chrome I can see that it's got the sprite image, it's loaded, it's just being superseded by the 1x1px gif.
Sample live URL: goo.gl/1c9nIF
Top of the RHS column the "print" icon is missing
Just above the google map the "Other interesting pages - what will you look at next" box is full of empty images
Footer is meant to have 4 "follow us" round social icons
etc
Driving me nuts, I've got empty css sprite slots all over my live site... not what I wanted to see on a Saturday morning :-(
Anyone know anything about this? I've checked on three different computers, cleared caches, etc, seems like chrome is broken...
The problem seems to be your image. I'm not sure why, but when I replace your image src with https://pingviin.org/images/flags/blank.gif it works as expected. Maybe whatever you used to create the gif put some strange meta tags on it?
This is my code, though Firefox added weird classes to each for some reason:
<img id="share_facebook" class="gknwrycuvfcesykaisun" src="http://localhost:80/graphics/share/facebook.png"></img>
<img id="share_google" src="http:/localhost:80/graphics/share/google.png"></img>
<img id="share_pinterest" class="gknwrycuvfcesykaisun" src="http://localhost:80/graphics/share/pinterest.png"></img>
<img id="share_tumblr" class="gknwrycuvfcesykaisun" src="http://localhost:80/graphics/share/tumblr.png"></img>
<img id="share_twitter" class="gknwrycuvfcesykaisun" src="http://localhost:80/graphics/share/twitter.png"></img>
<img id="share_email" src="http://localhost:80//graphics/share/email.png"></img>
In Chrome, this works as expected, but in Firefox, the images don't show at all. When I click on them with the document inspector, there's a grey information box that shows at the top left of the screen which suggests that the images are outside of the document or offscreen or such.
There's no special styles on these and I've even tried moving them outside of all the content of my page and putting them right below the BODY tag as well as removing the weird extra class values that Firefox adds, but at best the Google and email images show and none of the others.
Hovering over the image source address in the inspector shows a popup image for Google and email and the rest say "could not load the image". If I cut and paste the value and load it in a new tab, I can see the image fine.
I cleared the cache for "all time" for every category and still nothing. What is going on!?
For anyone else who runs into this question like I did, it was answered here.
The short answer is: Adblock.
I've created a web page, and it has 7 six sections with huge background images using background-size: cover;. It works fine in all browsers except Google Chrome (All versions/All platforms). When I try scrolling the page in google chrome or click on its links (which they also scroll the page using $.scrollTo) the page gets choppy and laggy and it scrolls slowly and uses 100% CPU.
I've uploaded the page so you can test it: http://baaemail.com/beta (I'll remove the page later). Even IE9/10 is fine, but chrome gets choppy.
The page has several "scroll" events bound to it and I have tried disabling the javascript altogether but it doesn't get better so its not from the scroll events.
I'm using background-size: cover because it shapes the photo exactly like I want it to and I want the image to be fixed that's why I can't use other methods like using img tag instead of backgrounds.
What should I do?
thanks.
A solution I found for myself for a website with similar behaviour was to add background-repeat:no-repeat css property for those divs containing huge background images.
You can also check if you have a background image for body or html that is repeated, for me the big problem was a repeated pattern image that interfered considerably with google chrome's scrolling performance.
Also if you're using CSS transitions on those "slides" you should check that those are not assigned to "all". If you're having a transition only for the "left" property there is no point assigning it for "all".
I'm not sure if this alone will help you but it is always a good practice to compress your images and your scripts.
This stuff did the trick for me. Hope it helps.
I'm banging my head against a wall with a coding problem. I've developed a website with a large background image to allow scrollable content.
The page appears fine on most browsers, but on the ipad/safari, this browser presents the full background image in the viewable area, not just the native resoltion of the background image as per the ther main borwsers.
It's important I keep the image background and allow it to scroll down as some pages on this site will be lengthy. Any ideas would be much apporeicated!
Thanks in advance!
Preview of layout page: http://websiteworkpreview.com/test/index_test.html
The homepage is index.html (for reference) - Homepage uses different bg image. No problems there...!
Error screnshot of background in Safari on iPad: http://websiteworkpreview.com/test/2.JPG
Mobile Safari has had some issues with image filesize, and some known limitations. Take a look at the discussion in the link below. It shows an example that looks very similar to yours, where the image is being cropped vertically, and some specs as to the limitations. Even though it is referencing using an iPhone, it would, of course, affect an iPad as well, as both use Mobile Safari.
http://www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari/