I built a website that works great on Firefox, IE, and Chrome. Client goes to a tradeshow and realizes the website menu went bonkers in their iPad.
broken menu http://www.glassdoctordenvermetro.com/wp-content/themes/GDDenverTheme/images/photo.JPG
I tried a website that lets you preview your design by simulating it in case you don't have an iPad (like me). But the problem is it looks fine:
http://ipadpreview.com/previewer?url=http%3A%2F%2Fglassdoctordenvermetro.com%2F
What would suggest I do to figure this out? Is it a problem with the font being different on every browser perhaps? The width of the tab changes based on the menu font and wording but again, it looks fine on all other browsers I tested.
Thank you
Opening it an iPad simulator shows that the font is a much wider font and there's also greater letter spacing. You should specify more options in the font-family tag to have another more condensed font that is available on iOS. You could also bring the font-size down on iOS. The big issue with the testing site you're using is that it's still outputting HTML, the only trustworthy type of site like that would have to generate a screenshot image to ensure consistency.
Here's some fonts to help: http://iosfonts.com/
And 11px works with the existing font.
Alternately, removing the uppercase transform makes it fit.
Related
Edit: I found out that the issue is exclusive to iPhones. I tested with an android device and it worked fine when I tried viewing the page on two different iPhones it broke on both.
This issue is mobile related, since when I shrink my browser window to the size of a mobile screen, everything looks fine. However, when I view the site on my actual mobile device, the drop shadow "breaks" at seemingly random places. If I zoom in and out these breaks will change their locations.
The current effect being used is
filter: drop-shadow(20px 10px 4px #707070);
After further research into this, I found that the issue was not specific to my website. If you go onto the Mozilla MDN Docs on a recent iPhone device, you'll notice that it gives you the exact same effect when zoomed in. I'm going to post this as an issue on Github as suggested in the docs. Here is what my mobile phone showed when viewing the Firefox Logo drop shadow effect.
As suggested in a comment, changing to a simple box-shadow fixed the issue, although the edges are more hard-lined and slightly less faded (using the same parameters). It's not enough to break this specific project and I know there are CSS features available that enhance this, so all is good!
I'm working on a responsive website and when checking it on my iPhone (iOS 13, June 2020) I found that the font size was different between Safari and Chrome.
I tried several things to account for it, but had trouble finding the cause.
I suspected it was related to some CSS I had from long ago: -webkit-text-size-adjust: 100%; Removing and changing this value had no effect on the difference though, so it was a red herring.
What would cause a discrepancy between the rendering of the same site and CSS on these two apps?
Here are two potential causes, there are surely more, but these were the ones I found and solved my problem.
Chrome obeys the system-wide "Text Size"
If you use the "Text Size" slider in control center, or the related settings at the system level, Chrome automatically alters the text of sites!
From what I can tell, there's no setting in Chrome for iOS to disable this linkage with Text Size.
So if you want Safari and Chrome to match, make sure that the Font Size state of your phone is in the middle position that's marked as "Default".
Good to know both in case you use the Text Size controls day-to-day like I do, or your users or clients do!
Safari has a "Page Zoom" setting in Settings app
On the other side, Safari has a setting called Page Zoom that goes from 50% to 300%. It's found in the Settings app under Safari > Settings for Websites > Page Zoom.
This setting can cause total chaos with CSS layouts at sizes like 200%.
Either way, if there's a discrepancy between the two apps, this Page Zoom setting is worth checking out as well.
Thank you for pointing me in the right direction - I've been having horrendous problems working out why Chrome on my iPhone SE was rendering text larger than Safari!
I don't seem to have a "default" setting for Text Size (Settings > Display & Brightness > Text Size).
However, -webkit-text-size-adjust: 100% did work for me - at least for Chrome which was where I was struggling.
In iOS 13, Safari exposes the media font-size to the final user, it means that in your root page (html tag) the css "font-size" rule is overrided, forced by the user and not possible to change.
And Chrome for Safari is not using rendering engine "Blink" as for Android, it's using Safari webKit render engine, so, Chrome for iOS is "Safari"
Anyway, you can react to this adjusting your media queries to work with "em" units instead of "px" in other words:
Change bootstrap (if used) breakpoints to "em" instead of default pixels.
Make your components border, paddings and other stuff pixel based.
Another way is understand what are the users needs and react before they need to adjust the font-size:
Adjust font size based on viewport (css clamp)
Use responsive layout
Use css border-box, box-shadow...
Another way is recalculate everything, at much cost:
What if the user changes the root’s font size?
I had a weird problem with paragraph on iOS14 ,13, it was enlarged, this has worked for me for Safari and Chrome:
-webkit-text-size-adjust: none;
I hope it will help someone too.
I need CSS help.
In this site header the site name "India Consumer Complaints Forum" is show in small font in IE 9 while it works fine in other browsers. I've tried this suggestion from a Mybb expert too but it does not work. I've tried other options like using 2.5em for font-size or moving font-size into #logotext id too but IE seems to be immune to it.
How can I show it in bigger font?
Your site link shows big in every browser, checked back to IE7. No issues found. You might have fixed it.
I've noticed some strange behavior with both Chrome and Safari on my Mac:
Mountain Lion
Safari 6.0 (8536.25)
Chrome 21.0.1180.89
The page is a simple fixed div with some text in it, I added a second div that does a simple CSS translation over 5 seconds so you can easily see the difference. My web app is using CSS transitions to show and hide portions, and while it was doing this large portions of the screen seemed to shift.
I've placed example code and a .mov file out on a server so hopefully you will see the same issue:
http://physicaltable.com/index.html and http://physicaltable.com/CSS_JIGGLE_TEST_2.mov
The strange bolding doesn't occur in Chrome on Windows 7, nor does it happen on the iPad 2 (v5.1.1)
Has anyone else seen this type of issue?
I realize this isn't much of an answer, but I've found that it's mostly because of the rendering of the elements. If the element needs to use hardware or any other type of graphics rendering, it basically takes an image of the text, adjusts it, then rerenders the text (if it can).
The "taking a picture" is where the boldness is lost, since the browser/display/something is adding the flair that makes the text look good. Of course it doesn't look that good, but that's just me.
I've noticed with different colors other than all white/black, it can behave differently. I'm hoping things will get smoothed out as browsers and rendering advances.
I found solution for this bug
its enough simply force your browser to rerender that at moment move is stopped
E.g.
$("your_element_selector").css("color", "color");
where color can be even same color as your text has
So, i am making a small portfolio site (http://www.cip.ifi.lmu.de/~fritschd/testDebo/),
where i have a BIG box with a BIG font. On mac, everything is fine, on windows however, depending on the browser it can really suck.
Firefox on windows is one of those.
Is there a way to smooth this big font? What other options do i have? (I don't want to use an image for SEO reasons). Other (system) fonts have the same issue btw.
EDIT:
The example can be found at the linked page. The font has a size of ca. 180px, so it's pretty big.
The browser that seems to have problem is the latest build of firefox on windows. If you look at the div with the name in the page, the borders are pixelated. I read that it is an issue with windows true font option and browsers that don't have own settings (i.e. chrome) regarding that. So what are my options at this point?
It's a very well-known problem of using ClearType fonts on Windows, not bound to any specific web browsers. Read this very clearly explanation font-face-loaded-on-windows-look-really-bad-which-fonts-are-you-using-that-rend
This problem should not affect Windows 7 and/or IE9 users.
My suggestion is to implement your big block of text using transparent PNG using the -9999px technique that satisfy the SEO requirements. Have a look at this for the original famous -9999px css-image-replacement-technique/ or this for the newly developed technique Replacing-the-9999px-hack-new-image-replacement/
Unfortunately as far as I know there isn't anything you can do in code that can help, but it can be remedied a bit in your own browser by going to about:config then toggling gfx.direct2d.disabled to true. Hopefully that'll help some.