0

I have a webpage created in html, css and some js. It's relatively simple, just the info page. All fonts appear smaller for this page, only in Chrome and only on a display with 2560x1600px. On same display, IE and Firefox for example show this properly.

For example, we can take a paragraph element in consideration.

<p>Some text</p>

It's not defined in my css files. It has:

display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;

Defined in user agent stylesheet.

And it's parent has:

.fpcell .content {
    font-size: 160%;
    color: #606060;
    font-weight: 300;
}

All fonts-sizes are defined in %. I don't have fixed font-size anywhere on the page, defined in let's say px (all elements should take font-size in % in regards to 16px).

I tried to set fixed font-size: 16px; on body, so this 160% would be taken from there, but no luck. I tried to set fixed font-size for this div (the parent) and for this paragraph in px, but also no luck.

I can't replicate the issue, I tried all kind of emulators for big displays (mine is 1920x1080), including Google devTools - it still looks ok, but on a physical display with 2560x1600 it does look smaller. I also tried some other things, but no luck. The css is reset.

Main issue is, not being able to replicate the error on my local machine.

Nimantha
  • 6,405
  • 6
  • 28
  • 69
muki0082
  • 1

1 Answers1

0

Finding the solution from a similar question Font not consistent in Chrome, Firefox & IE

"I suggest you use a CSS Reset like the one from YUI. It will make your pages much more consistent across all browsers, including font rendering. It makes the biggest difference with IE and the other browsers, but it gets rid of all manner of inconsistencies."

Ramakanth Putta
  • 676
  • 4
  • 15
  • Thank you for quick replay, but I already sow that question and nothing from there didn't help. My css is reset in the file. And also, (what really should fixed the issue, but it didn't) I set font-size on body in px and all other font sizes in % - relative to that. Also, I tried to set font-size in px for that element where the text is, still no luck. – muki0082 Jun 23 '17 at 10:18
  • webkit is rendering engine used by firefox, and chrome is developed on chromium rendering engine. the css parameters related to webkit might also be causing the difference in font size. – Ramakanth Putta Jun 23 '17 at 10:28
  • Thought of that as well... I also tried to remove the paragraph tag and leave the text in it's parent div - which is defined in css. Still the same. I explained here on this paragraph - but all text on the site, in the main menu, in divs, paragraphs,.., are smaller in this environment (chrome, on 2560x1600). This is something specific, and I don't have large display to test everything that comes in mind, and emulators don't display this issue, so if anyone has a suggestion for an emulator that could really display this as monitor does, that would be of great help too. Thanks Ramakanth – muki0082 Jun 23 '17 at 11:43
  • you can check using https://www.browserstack.com/ may be on different resolutions and different browsers. – Ramakanth Putta Jun 23 '17 at 11:50
  • Thanks, tried that too. They only have 2048x1536 max, but in any case still looks the same. I tried google devTools, you can set custom width and height, also looks the same. – muki0082 Jun 23 '17 at 12:03