In the following link there are strange black patterns at the top of the page that only show up on mobile devices, I checked on 2 different android devices that had the same case, but on my desktop computer it does not show up even when using different viewports.
The link: http://dshift.totalh.net/blog/solving-the-mossad-challenge/
A photo of the strange phenomenon:
There are weird black patterns on the top as you can see. How do I go about removing them? I have yet to identify the cause of the issue as well.
EDIT: I changed the picture with a higher res version, though the border had receded a bit, it's still there unfortunately, and making the image any larger will start to affect load performance. I'll update if i find another solution.
I think it's, as i've told in the comments, something with the resolution of the image. You're able to check if it is the background-image causing the problem by changing the background to e.g. the following:
body {
background-color: white;
}
Related
I have searched for a couple hours on this topic, to no avail. When I view my site on mobile via Safari, sometimes pieces of the background image are missing. For instance, everything will look great, but then there will be a chunk missing in the middle. Or, perhaps instead there will be a chunk missing from the bottom. It appears to be random. Then, if I turn the phone, the missing piece fills in and even if I turn it back to portrait mode, the piece has filled in.
Any ideas as to why a section of an image won’t load? Could it be that the image is too big? Just looking for some ideas to get started with. Unfortunately, I haven’t come across this problem in my searches. Thanks.
Images should not be missing chunks. If it is a JPEG image, there is the tiny possibility your image is being corrupted in transit. Is the image being created dynamically?
But the most likely cause is that you have some html element over the top of the image that is opaque - and preventing the underlying image from being displayed.
I have little website I'm trying to plan on building. But when I started making the background image for it, the image is made so my website is kind of scrolling web page up and down so I made it long. But now the image only shows small part of it, I trying changing resolution of my browser and I could see it but without that I cannot scroll to see the whole image.
The problem which shows that the photo is not fully shown, photo is 2160*3840 px means it is opposite of normal resolution:
If you're using CSS and adding this as a background image to the page body, then it should be an easy problem to solve (and in fact you get quite a few options).
Firstly, lets assume this is your current code:
body {
background-image:url("yourimage.png"); /* The filetype does not matter */
}
Now, as far as CSS sees it, some people viewing your site could be on phones, some on 13" laptops, or some could be viewing it on 5k desktops - if we want the image to work on all at all of these different sizes, then clearly the image is going to have to be modified in some way.
By adding the background-size property here, we can adjust how this happens:
background-size:cover; seems like the best choice for you. It will slightly crop / stretch the image to fit it (but remember, this is probably going to be beneficial).
background-size:100% 100%; will always display 100% of the image - but this will usually result in it being stretched, etc.
There are quite a few other values this property can be set to - you can take a look at them here, or read the spec on it over at MDN.
I have a website (templenaylor.com) that displays fine on firefox or chrome on macs, but on certain pcs displays like so:
How it should display:
I know this is somewhat a vague question without a codepen but was wondering if anyone has encountered this problem before or if it is just my version of chrome. I do not have a lot of PC's to check the site on so I am asking here for input.
Thank you!
Basically, different pc have different length and width . for an example, small imac will display your website just fine, where else a bigger version 27inch imac have different width and size, therefor , it will react differently on screen.
You need to check your css, for an example, its a good practice to use percentage for responsive website..But at a certain situation, its a a good practice to use # media rule. you could set your css to #1300px width(#media rule), Study on this http://www.w3schools.com/cssref/css3_pr_mediaquery.asp regarding the #media rule. Im pretty sure this will solve your problem as i had previously face this problem with my last project. But if that doesnt solve your issue.
You might want to explore more on webkit extensions. https://developer.mozilla.org/en-US/docs/Web/CSS/Webkit_Extensions
i hope with these. it will solve your problem. Cheers.
I viewed this website in Chrome(v56.0.2924.76) on a laptop and it produced the second screenshot (the one you want). However, I believe that the issue relates to the header background image height. You have it set to 100vh, but try 100vmax, which is relative to 1% of viewport's larger dimension. Here's the CSS:
#header {
height: 100vmax;
}
I've found a TON of posts and questions on mobile width/height. The top two answers are to use media queries, or to use vh/calc(). The other issue I've seen numerously is the mis-understanding of width/height(100%) vs width/height(auto) with the use of margins/padding/borders. What I've run into seems to be unique, but with the flood of mobile issues, I have a feeling somewhere out there is an answer to this already. If you've seen this, please point us to the correct question/answer.
I've created a black glass along with an element to use as an image previewer. The glass and image have width("100%") and height("100%") without any padding, margin, or border. On a computer, it looks perfect. On a mobile device, the dimensions can get thrown off and the background shows through.
If I remove the height("100%") on images that are taller than wide, it resizes to the entire element. If an image is wider than tall, removing the width("100%") causes it to grow appropriately again too. However, this doesn't solve my issue because without a width or height cap at 100%, larger images will overflow.
I first noticed this issue on my cellphone (android) and have had no issue repeating it on Chrome's emulator. I have uploaded a quick recording of what I am seeing to screencast.
It's been suggested that a css rule is leaking from a parent element. Chrome supports the style 'all: initial;' to reset the css. I also manually reset my css with this method. Resetting the styles did not change the issue.
Once again, thank you for taking the time to look at my issue!
I have a website that I am working on: http://keramed.com
in FireFox on my Mac the image on the main page shows up. (The Endoshield DSEK Graft Injector)
Now check in Safari and the image does not show up.
I have tried taking the original .PSD and saving it as a .jpg or .png and it does not matter.
I have commented out all stylesheets and this still does not solve it. The rest of my images are showing up, just not thing one.
I just dont understand I am stumped.
EDIT:> Photoshop says it is an RGB 8-bit image.
Your image isn't showing up in Chromium either. However, taking out the image width and height specified on the image element as percentages has fixed the problem. It is better to avoid using percentages as widths/heights for images as they may not render as well as you'd expect.
It's definitely not the image, as safari can render it, see: http://keramed.com/images/mainimage2.jpg
You are having over-flow: hidden, somewhere and I suspect it's that. Or if you are using js to change the display of the image from none to be shown, that might be failing.
I have had the same problem which I solved changing height/width in pixels rather than percentage.
Another reason for browsers do not display the image — 'content' parameter in stylesheets that are associated with the image.
For example, I faced with the same problem some time ago and it happened because into the stylesheet the class used for the image had 'content' parameter.
.image_class {
...
content: ''
}