I have a problem with this page. I developed it in Firefox on it's default zoom level. The idiot that I am, I haven't tested it on Chrome. So, now I see that the page's layout and/or font size is different on Chrome and other Webkit based browsers. Default Chrome zoom level is 75% so everything is smaller on Chrome. I have to say that I've made a dozen of web apps but have concentrated on the backend side of the application and never put many thoughts in how the page looks like on different browsers.
I mean, I have if javascript cross browser stuff had to be addressed but this is something that I never came across.
What I think is wrong with this is font size. I have a #main-wrap that wraps the entire app and has a base font size of 16px. So, #navigation a has 0.7em because that way it looks normal in Firefox, but looks really small in Chrome.
Could anyone post some tips or hints as to way this is happening?
EDIT:
I've fixed the problem with
zoom: 1.29;
-moz-transform: scale(1);
-moz-transform-origin: 0 0;
And it works but, as I know, it's a good to do this like this. Is there a CSS technique do make pages look the same across browsers?
I've had this issue as well. Using the #viewport tag works well. Here are the articles that I used to resolve the issues:
Firefox #viewport tag - https://developer.mozilla.org/en-US/docs/Web/CSS/#viewport
Setting viewport and zoom - https://css-tricks.com/snippets/html/responsive-meta-tag/
To make sure fonts display weight properly across browsers, an article regarding faux font bolding is http://alistapart.com/article/say-no-to-faux-bold
There are a lot of similar questions with suggestions. Here's one that helped me:
https://stackoverflow.com/a/26353104/2256476
Here is your Answers......
For Firefox :
open up a new tab, and type about:config into the address bar, and
press enter.
Then use the search box, enter the word "pixel" then it will show
"layout.css.devPixelsPerPx".
change the value -1.0 to 1 for 100% perfect scale...
For Chrome:
Right Click the chrome icon or chrome shortcut icon, go to the
properties.
Then in the "Target:" field, Click the field and press end button.
Now you are seen this "chrome.exe" at the end.
copy this text : chrome.exe" /high-dpi-support=1
/force-device-scale-factor=1
and paste on chrome.exe"
Then Restart chrome or close the browser and double click the
shortcut icon.
The reason for the difference is because Firefox uses the system zoomlevel. Which is set at 125% by default on Windows. Whereas Chrome uses a default level of 100%.
I would advise to design for Chrome, because then the text will always be readable.
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 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.
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
I have a simple html page in an iframe that I am trying to scale with an html5 input range slider. it creates a white border inside the iframe, what looks to be a doubling side effect.
It works perfect in chrome(6.0.472.59 mac), but not in safari (5.0.1 mac).
here is a link to live demo - http://dl.dropbox.com/u/1031653/safari-bug.html
Any sort of suggestion on why this may be happening? hardcore hacks are fine if need be.
This appears to be a Safari bug. I would recommend reporting it at https://bugs.webkit.org/
I'm seeing this bug in Chrome as well (version 11.x.x)
One solution is to go into the IFRAME's document (assuming you have access) and set the size there. Something like this:
$('iframe').contents().find('body').css('-webkit-transform', 'scale(0.5)');