I am making a website in which everything is fine on almost all major browsers but somehow Mac Safari is showing a different css layout. like wrong background ( black-gray to white) wrong Nav-link color (white to default blue)
as I don't have Mac myself. I am not able to identify or test anything regarding this.
can you look at it & tell me if there is a solution or workaround it. Website
Thanks in advance!
Looking at it on my iMac (OSX 10.8.5, Safari 6.1.2), I see the dark gray background and white nav-link color. Here's a screenshot.
I would suggest giving an emulator like BrowserStack a try if you don't have access to a mac. (I think there's a free trial account option.) I will also parrot Lokesh's comment to (nicely) remind your client to clear his cache and try again.
Also, I did notice you have a horizontal scrollbar no matter the browser window's width. I believe it is from the width: 100%; on your footer. Try width: auto; instead.
Hope that helps. Good luck with your client!
Related
On Windows, and to a certain degree also on Mac OS, with different browsers (Firefox, Chrome, Safari), our menu bar has rather pixelated/blurry font-rendering. This is on an ASP.NET Core 2.1 site that uses Bootstrap 4.1.3 but it's easy enough to reproduce with just simple HTML: https://jsfiddle.net/2tgc9r84/
<html>
<body style="background-color:#e72c87;">
<p style="font-size:20pt;">
This is some text that looks terrible.
</p>
</body>
</html>
Interestingly, the same font renders just fine in other areas of the site. I have noticed this on a 4K monitor that has 150% scaling activated but the issue also shows up with 100%. I have also tried this with different fonts, so apparently it's not an issue with the font, either.
Originally I thought this was an issue with transparency or transformations but finally, I tried simply changing the background color - and it turns out this blurriness is very obvious with red and dark blue (and of course, combinations of those, like magenta), and pretty much invisible with most other colors. Also, by changing the main background color, I can reproduce the issue for the other areas.
You can directly have a look at the site where this occurs here: https://beat-the-rhythm-vr.com/Home/Social (the navigation with the blurry text shows up after accepting the cookies).
Here's an image that shows the effect with different backgrounds, and also rendered on Mac OS (the Mac OS screenshots appear smaller in the image):
As far as I can tell, this does not happen at all on iOS. On the Mac, I don't quite see the issue on the screen but it does become obvious when making a screenshot. This could, however, also be an artifact due to scaling on the screenshot.
This is what it looks like on iOS (I get the same blurriness on Windows when making the Window small enough to get the same layout as on mobile, so that's also not the issue causing this / fixing this):
The obvious question: Is there any way to fix this, and if so, how?
EDIT: This is in addition to the comment on Porter's answer (I can't add screenshots in comments, so I'm posting this here):
EDIT 2: While this article is about a slightly different issue, my guess is that what I'm seeing is really just a limitation of ClearType that is related to what the article outlines: Color-aware ClearType requires access to fixed background pixels, which is a problem if you don't know what the background pixels are, or if they aren't fixed
ClearType apparently doesn't work when the background color isn't known, and from what I'm seeing, it seems to be designed primarily for black text on white backgrounds, also works well with light colors on dark backgrounds but not really so much for red/blue/magenta backgrounds (and any font-color).
I am unable to reproduce this on a 1080p or 4K display, with either mobile or web view on Firefox and Chrome. Fonts do tend to blend with the background color, so not every pixel of the font is going to be the same color; It'll blend on the edges. The smaller the font, the less pixels it has to work with for blending. If you use a larger font, does the same problem occur?
I have built a Meteor App/Website and I am trying to have a responsive fullscreen background image at the top of this page (https://www.conducate.com).
It works as expected in the Chrome Developer tools as well as in the Safari Responsive Design mode, but when I deploy the page and look at it on my mobile, it seems to zoom into the top part of the image, and does not resize it as expected from the dev-tools. As a result, there is just a grey blur to see.
Has any of you come across this problem before? It is hard to debug, since it works correctly in all the developer tools, but not at all when actually viewed on a mobile device.
Below is a link to an image with screenshots, one from my mobile (iPhone 6s, safari browser) and the other from the safari responsive design mode on my mac. Unfortunately, I am unable to post an image due to lack of reputation, so I can just post the link - I am still a newbie here...
https://s3.eu-central-1.amazonaws.com/conducate-images/stackoverflow/example_screenshots.png
Any help is much appreciated!
After some searching for iOS specific issues, I finally came across the solution to the problem by looking at some other examples.
It turns out, that most browsers understand the css line
.container{
background: url(http://www.link-to-image.jpg)
...
}
This is not the case for iOS, here you need to specifically state that it is an image, that is used for a background.
.container{
background-image: url(http://www.link-to-image.jpg)
...
}
I'm having an issue with a thin white border displaying at the bottom of my site just after the footer on iPhone only.
I'm using an iPhone 5 with iOS8 and I've also tested on a 4S with iOS7 and had the same issue. I've tested various Android Devices, and they are all fine.
I can't find anything in my CSS that would be causing this issue. I've tried the negative margin method but that did not work. If anyone else has run into this problem, I could really use some insight on what could be causing it. Thanks in advance for the help!
Here's the link
It might be hard to see it on a white background, but here is a screenshot.
I have a website I have just built. Everything looks reasonable in Mac browsers, but in windows browsers such as IE there seems to be some rendering problems in terms of very thin sketchy white lines in between where the main header image butts joins the surrounding background image, and also between the background image and the surrounding background colour. The images were created in photoshop. I'm probably not explaining it very well, but please take a look at the site. The link is below. Thankyou
http://www.eve-tattoo.com/index.htm
These are img artifacts. Here's the fixed jpg: http://i.imgur.com/O6rtiZ2.jpg
so I have a site that's not nearly done yet (eklinik), and its breaking on the iPad (iOS in general actually)... Things like the footer doesn't stay fixed, there's extra padding to the right, a div that's supposed to be a 100% width/height isn't, and so on so forth...
Now, I'm not asking someone else to clean up my mess (despite how nice of a thing that would be), but I am asking how can I start troubleshooting the website on the iPad...? For desktop browsers, I can always bring up the dev tools and see what's breaking where...
I do not own a mac based system, I do have an iPad though... The Dev console in the iPad is only looking for JS errors (mostly) and doesn't show anything...
Any suggestions will help... Thanks...
PS. The site is only going to run on the latest browsers:
Chrome 12+
Firefox 4+
Opera - 11+
IE 9+ (barely)
Safari 5+
If you do feel generous, and do want to point out mistakes (optional) I might have made, along with possible solutions (optionally optional), then feel free to drop me a line - abhishek#live.com.my... :-)
The question's old, but a good solution for this has come up:
Adobe Shadow
I've had quite a few clients recently that wanted their sites to be "mobile compatible" and the best solution for checking code/css on iPad is Firebug Lite:
http://getfirebug.com/firebuglite
I believe you can upload and include the javascript in your site and then automatically turn it on using a simple attribute in the html tag ( see their docs for more info).
You can also install the bookmarklet in your iPad bookmarks using this method here:
http://osxdaily.com/2011/12/02/run-firebug-on-ipad-or-iphone/
I use it using the bookmarklet method and it works. Unfortunately it is a little hard to navigate, because it doesn't handle the touch controls very well (it has trouble distinguishing between a 'hover' and a 'click), but it's better than nothing.
Regarding your actual problem, it sounds similar to an issue I recently had on one of my sites. Did you set your viewport tag? if your site is normally 960px wide, and you have a div that is using width:100%, it will look wrong on the iPad because the window on the iPad is technically only like 600px wide. So the browser thinks width:100% is 600px instead of 960px or larger. If you set the viewport to 960px, then iPad Safari says, "oh, my browser window should be 960px (instead of 600px)," and resizes accordingly.
Hope that helps!
I use weinre to test on mobile devices, not just iPads, and it works wonders.
If you carefully test in your PC with chrome and safari as well until you get consistent results I would expect iPad or Android tablet to render "nearly" the same...
About javascript errors you should of course avoid and fix them, are you using jQuery or any other intrinsically cross browser js framework? if not, you should! :)