I am currently working on a reponsive css webdesign and have a few sprites for different button states.
In this case I've tested the webdesign in Firefox, Opera, IE (compatibilty starting from IE8), Chrome and Safari and everything is displayed correctly. The website has been tested under different cell phones and tablets with different browsers without any problems.
I'm in the final testing stages and having co-workers see how the website looks in different resolutions... A friend who owns a macbook pro is the only one who encounters this problem and only under safari which makes it difficult for me to target and solve. I have tried to reproduce the problem using his screen size and switching safari's mode to that of a mac user without success.
The code is the following :
.buttons-menu .btn .rules, .buttons-menu .btn .contact , .buttons-menu .btn .tickets , .buttons-menu .btn .profile { display: block; width: 143px;height: 32.5px;padding-top: 37.5px; background-size: 100% 300%;}
.buttons-menu .btn .rules {background: url(../images/sprite-button-03.png); background-position: 0 -100%;}
The problem is that this tester sees about 2 pixels of the second part of the sprite when he shouldn't and this only in safari.
Thank you for reading this.
EDIT : SOLUTION : As ralph.m thought, the problem came from the rounding of the decimals in safari that didn't always behave the same as in other browsers.
Avoid using values like .5px. The browser will have to round that up or down to a whole number, and you don't know which way it will go.
Related
I am working with Bootstrap 3.3.2 . My Goal with the site im building was to have the nav menu always collapsable, like when it is in mobile view. to accomplish this I went to bootstrap.com/customize and changed the #grid-float-breakpoint: to 99999999px; so large that it would never uncollapse the nav. This works fine for all other browsers except for Safari. In safari my nav header image shows up, but the icon for the drop-down menu is gone.
In safari when inspecting the drop-down icon's css I find:
#media (min-width: 99999999px;){
.navbar-toggle {
display: none;
}
}
It seems as if Safari thinks my viewport is actually greater then 99999999px. Now the simple change would be to adjust my code to display: inline; But when i do this it takes the .navbar-toggle out of the grid system and not pliable for responsive.
Any help towards a solution or if anyone knows of this as a bug issue, would help out alot. I have already researched issues with the #grid-float-breakpoint and did not find much other then this WAS an issue with chrome a while back but has since been patched.
thanks
Presumably you're referring to http://crbug.com/375574 , which apparently still applies to Safari 8. The solution is to use a somewhat less absurdly-high value for #grid-float-breakpoint. Removing a single digit seems to be sufficient:
#media (min-width: 999999999px) {
Also, I went ahead and filed a WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=141533
After messing around with the css for a few hours I found that adjusting the #media (min-width: 9999999999px) .nav-bartoggle to -webkit-display: inline; and adjusting the parent element width and a few other adjustments can result in acceptable code. Im sure cvrebert's method will work much better. But I just wanted to comment that there is pure css work arounds in the case some one needs to know in the future.
Is there a CSS/Modernizr way, to know if the browser support background-attachment:fixed ?
I'm using background-size & background-attachment together
background-size:cover;
background-attachment:fixed;
And if it doesn't support, it still have an impact on the background-size, and I wants to prevent it.
I prefer a Modernizr way(like a new test).
You can see to issue here the 2 big "parallax" images(scroll down) - with the css class of:
"parallax image-1", "parallax image-2".
http://royalchef-yes.walla.co.il/
I have been banging my head against this issue recently also. I have parallax strips in a design and iOS users were reporting that the background images in these a) were horribly distorted, and b) were not parallax. I don't own an iOS device, so I had to work through others to debug this, but it appears that iOS purposefully disables on-scroll updates like parallax effects, and this happens in Chrome as well as Safari.
I was unable to find a way to get parallax backgrounds to work on iOS (although I notice that there are some SquareSpace and other sites that have achieved the effect by swapping them for scaled inline images, which was more complex and time-consuming than I was willing to attempt for something that should just work). So instead I decided to simply disable the parallax effect for iOS by resetting the background-attachment value to scroll for these elements on iOS only. Since Modernizr detects features and not browsers, I had to use this script to detect all iOS devices and then set a CSS style to override the fixed value:
https://gist.github.com/jsoverson/4963116
Then my CSS is:
.device-ios .parallax-strip {
background-attachment:scroll !important;
}
It's not ideal (it's a device-dependent hack and it downgrades the experience), but given Apple's hostility to parallax on iOS (supposedly because it affects performance), I think I can live with it.
Hope that helps someone else.
iOS 13 does not support background-attachment: fixed property, you need a fallback function to overcome this. The fallback function needs to check whether the device is iPhone or iPad.
var usrAgent = window.navigator.userAgent;
if (usrAgent.match(/iPad|iPhone/i)) {
// then do something
}
I found an answer in another question, so I'm not sure if it works but it doesn't hurt to try :)
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: 100%;
background-image: url('xx.jpg');
background-attachment: fixed;}
And put into
<body><div id="background_wrap"></div></body>
Source: Using background-attachment:fixed in safari on the ipad
I used "320andup" in order to make my first real responsive website. I managed to have a perfect adaptive environment except only one thing. The background image in Chrome and Safari is pushed down 18px. I can't explain why. Only thing I know is that when i add in the body tag "background-attachment: fixed;" the problem is solved but when I scroll I get an ugly experience that I don't want to have. I also tried this
#media screen and (-webkit-min-device-pixel-ratio:0) {
body {
background-image: url(../img/chrome-safari-img.gif);
}
}
with IE to completely break.
Firefox, Opera and IE8 are ok. Only problem is Chrome and Safari.
You can see exactly whats the problem and investigate the code in my localhost website -> http://www.demo.lollypop.gr/ffloor
I would like to avoid detecting chrome with PHP.
Just add position:absolute; in your body tag.
I am using Google's web font api with the font "Lato", font-weight of 100.
On the desktop browsers I have tested everything displays fine. However if I view the web page with iPad or iPhone (both iOS5) I notice that the font is extremely thin and the only thing that seems to be displayed correctly are the dots.
I tried implementing the font using the Javascript, LINK-Tag and CSS #import methods, all produce the same results.
I saw that in the FAQs they state:
The Google Web Fonts API works reliably on the vast majority of modern mobile operating systems, including Android 2.2+ and iOS 4.2+ (iPhone, iPad, iPod). Support for earlier iOS versions is limited.
Which means it should work, right?
Is there anyway to solve this?
Thanks
Something I have seen to help really thin Fonts (Incidently also Lato) is this:
-webkit-text-stroke-width: 0.1px;
Anyway it's only a case by case basis, I would use a class / media query to make sure to only apply it when needed (safari(with a class set by js) on a scale under 1.0 or something). Try higher float values if needed.
It seems to me that it's an unlucky combination of an ultra thin typeface with the way Mobile Safari scales the website to fit in the screen. Normally fonts have hinting that allow your computer to interpret how to paint pixels if it gets to subpixel levels, but this is overridden by Mobile Safari's scaling, and thus paints half pixels as semitransparent.
You could prevent mobile safari from downscaling your website by adding the following meta tag:
<meta name="viewport" content="initial-scale=1.0; minimum-scale=1.0">
If you want the font to appear smaller in mobile safari, the solution would be to keep the previous declaration and declare the font size a media query:
#media only screen and (max-device-width: 480px) {
font-size: 15px;
}
If all else fails, I'd add a 0px text shadow:
.selector {
text-shadow: 0 0 0 white;
}
Maybe it's -webkit-text-size-adjust 's fault.
Try
-webkit-text-size-adjust : none
You could try adding this to your CSS for the element in question:
-webkit-font-smoothing: subpixel-antialiased;
Similarly, you may have transforms effecting the antialiasing. You could also try:
-webkit-transform: translate3d(0,0,0);
And even...
-webkit-backface-visibility: hidden;
Crazy, I know.
Are you using Ultra-Light 100? If you set it to 100 but the file is another weight Mobile Safari could be trying to simulate the thinner variant.
Either way, try -webkit-font-smoothing: antialiased;, if that doesn't work you're out of luck, try the 300.
I'm having a problem in Google Chrome. I'm using a simple hover state on a display:block; link to change only the background:url(); property on the hover.
Google Chrome shows the actual hover change ok, but when I mouse out of the area, the background goes transparent/disappears.
Here's my CSS:
#branding #logo a {
width: 259px;
height: 201px;
border:none;
display: block;
background:url(images/logo.png) top left;
}
#branding #logo a:hover {
background:url(images/logo_hover.png) top left;
}
The actual site is here: http://beerblestudy.org. Again this is only happening for me in Chrome. Any thoughts?
It's working for me an all browsers. Try deleting your cache because it's working normally. I recomment you to delete the lines top left since they aren't necessary
Your background is disappearing in chrome here too.
I know I shouldn't "me too" on here, but this is odd and what brought me here was the same problem I'm having on a site I built recently: http://macvillain.com - the right hand column image blocks.
I tested thoroughly on most browsers (not ie6 or 7 - I've banished them) and has been fine in chrome for the past two weeks until today. Sometimes clearing cache etc works for a little while then it comes back. I don't get it...
UPDATE:
Hi I got an answer on the Google Chrome forum which said:
"Chrome uses strictly HTML5. Validate HTML code http://validator.w3.org/"
I had forgotten to do this and there were a couple of invalid things which I fixed and now all is fine and dandy.
I suggest you do the same.
Try this technique: I saw a JQuery plugin that automatically download images specified in CSS style sheets.
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/