Today i upgrade my phone to iOS7 and find out some weird problem .
(blog.niwyclin.org)
This is a test post page of my web site
On desktop browser it looks fine.
I use Responsivator to check, and its perfect, like this (i.minus.com/ipy6XHEepJcvf.png)
but on browser in iOS7 (include safari and chrome)
(i.minus.com/i2B2Ul5f09WL8.png)
(i.minus.com/iDM5uVFIvegKe.png)
it break a word but i don't know why.
It has white-space: pre set.
Any issues with the my css(less) code?
I found out the solution.
From http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
it seems webkit on iOS 7 changes overflow-wrap property.
so i add pre {overflow-wrap: normal;} manuale, and it's done.
Related
So there's this problem with the site's UI:
it works fine in Google chrome etc in mobile browsers but when viewing in Apple safari mobile browser, the site's UI gets displaced.
I have tried everything, I guess the margin property is not working in safari. Take a look at Screenshots.
how it looks on android chrome
Second image is how it looks on safari. and it should be like first image on safari as well
First thing I would think of that try to use a css normalizer
https://necolas.github.io/normalize.css/
Along with a css prefixer to ensure the problem is not from the design
https://autoprefixer.github.io/
In case both of these solutions didn't work please provide a JSFiddle Code in order to help you properly.
I have a select.
It displays well in Chrome, but not in Firefox.
My code is here: jsfiddle.net/oxtdxq5h/1/
Issue seems to be white-space:pre-wrap or -moz-pre-wrap. I haven't tested it as I just seen your code from my mobile.
After investigating I came to know browser does not support such breaks. Chrome has took an exception over it.
I have built an intro animation using jquery. This looks fine on my machine in all browsers (ff, chrome and safari).
On the clients however, it does not!
Clients screen shot:
http://madmantis.co.uk/debug/screen-shot-client.png
My screen shot:
http://madmantis.co.uk/debug/screen-shot-vs.png
I just cant figure out what is going on here....perhaps something to do with line wrapping in css?
I am on safari 6, he is on safari 5. He reports the same problem in chrome, again I dont see the error.
The website is available at http://dev.system2.co.uk
Thanks for any help
It seems like there has been some changes in the default font rendering method in Safari 6. Here's a little CSS that might work for you:
html {-webkit-font-smoothing: antialiased}
Taken from this topic: Font render safari 6
I got a really strange problem, and after so much tries and research I can't get out of it.
I have a website, but SOME (just 5% of visitors) people with the SAME version of chrome, see the text flowing out of divs and text overlapping. It's very strange because I tested the website on all chrome browsers using browser testers, without any problem. And in internet explorer or firefox this problem never happens...
A page is located here
And here are some screenshots of what SOME people see (maybe you won't see this in chrome)
click here
Maybe it is because of the font face I am using? Or maybe some bad coded CSS?
Please help me out of this!
Thanks a lot!
I see you use .svg font. Recently I was hunting some Chrome font rendering bugs and saw this:
http://code.google.com/p/chromium/issues/detail?id=95102
This seem very similar to issues you are having. You could try to serve some other font type to Chrome and if this would fix that.
If you don't want or can't serve some other font type to Chrome, the only thing you can do is wait until Chrome version 24 is out to all users which should be soon (I can't find any announcement)
I tested it in
Chrome 23.0.1271.97 m
Chrome 26.0.1371.0 canary
Chromium 25.0.1334.0 (169326)
# Windows 7 x64 and your page seems fine for me.
I'm having some problems with a certain piece of code which sits in my site; this error only occurs in Internet Explorer 7.
Rather than post all my HTML/CSS markup here I have put up a version of the site here.
As you can see I have "Widgets" in columns, for some reason IE7 adds an extra space under the Widget Header while FF displays it fine without any space.
This error does not occur in IE8, FF3, Opera, Safari or Chrome.
Can anyone suggest why this occurring and if possible, a fix?
Thanks in advance!
Add this css to wgt-wrap and it should behave.
zoom: 1
Google for hasLayout for explanation.
[EDIT] This discussion provides more insight into this IE bug. Why does Internet Explorer need the "hasLayout" flag?
Unfortunately IE 7 doesn't run very well on Ubuntu so I'm unable to reproduce your error, but have you tried resetting your CSS with a stylesheet like Reset CSS?
There is also a great site about browser quirks that you might want to have a look at.
Did you start by zero'ing out all of your element by doing a CSS reset? I see you have a few different elements in your div, it's possible that one of these has a default marin in IE7 that is throwing everything out of wack...