Styjun

Why jet engines sound louder on the ground than inside the aircraft?

Applying for jobs with an obvious scar

Drawing a circle with nodes shift with Tikz

Is Error correction and detection can be done with out adding extra bits?

What happens if a company buys back all of its shares?

Is straight-up writing someone's opinions telling?

Necroskitter and creatures dying because of placing -1/-1 counters

Company looks for long-term employees, but I know I won't be interested in staying long

Is this Android phone Android 9.0 or Android 6.0?

Grouping into more groups in one iteration

What would be the safest way to drop thousands of small, hard objects from a typical, high wing, GA airplane?

How slow can a car engine run?

How to belay quickly ascending top-rope climbers?

Is encryption still applied if you ignore the SSL certificate warning for self signed?

Is it possible to breed neanderthals through selective breeding?

Software need db owner permission to master database (sql2016)

Operation Unzalgo

When is the Circle of Dreams druid's Walker in Dreams feature used?

How would you say "Sorry, that was a mistake on my part"?

The most secure way to handle someone forgetting to verify their account?

Arithmetics in LuaLaTeX

What were the problems on the Apollo 11 lunar module?

Why were these characters absent in Spider-Man: Far From Home?

Why isn't a binary file shown as 0s and 1s?

Chrome scaling issue while using rem units

Disable same origin policy in ChromeHow to remove border (outline) around text/input boxes? (Chrome)See :hover state in Chrome Developer ToolsDisabling Chrome cache for website developmentHow do I get ASP.NET Web API to return JSON instead of XML using Chrome?Chrome, setting width/height in rem units with jQuery do not work as expectedrem units don't work in webview0.1 rem border-width renders differently on chrome and safarirem units on Asian browsersMedia Queries issue: Safari not scaling elements in REM

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

we want to make everything on our website sized to 90% of actual proportions (luck we are using rem units), so the easiest solution for us is to write html font-size: 0.9rem; rule. However, we are facing some bugs with scaling in chrome - some elements have greater margin the other, not precise width/height etc. It works great in Safari and Firefox... you can see the example here in fiddle, some buttons have undesirable last 1px height white line instead of background.

edit: well it seems to occur on retina display only

edit 2: I've updated chrome from 72 to 73 and it's okay now

css css3 google-chrome scaling

share|improve this question

edited Mar 26 at 10:08

ketysek

asked Mar 26 at 10:00

ketysekketysek

41011 gold badge77 silver badges2727 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  works fine for me in chrome.
  
  – Mikel Ferreiro
  Mar 26 at 10:04
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  hm ... weird ... maybe the problem is related to retina display?
  
  – ketysek
  Mar 26 at 10:05
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @MikelFerreiro oh cmon ... I've updated chrome from 72 to 73 and it's okay now...
  
  – ketysek
  Mar 26 at 10:08
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm not sure it's a good idea to write things like html font-size: 0.9rem;. The rem is the size of the html element (r stands for root), so you're basically saying that a rem is equal to 0.9 of a rem.
  
  – Mr Lister
  Mar 26 at 14:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @MrLister so you would use font-size: 90% instead? It doesn't seem to behave differently.
  
  – ketysek
  Mar 26 at 16:05
  

  
  
  
  

add a comment | 

1

we want to make everything on our website sized to 90% of actual proportions (luck we are using rem units), so the easiest solution for us is to write html font-size: 0.9rem; rule. However, we are facing some bugs with scaling in chrome - some elements have greater margin the other, not precise width/height etc. It works great in Safari and Firefox... you can see the example here in fiddle, some buttons have undesirable last 1px height white line instead of background.

edit: well it seems to occur on retina display only

edit 2: I've updated chrome from 72 to 73 and it's okay now

css css3 google-chrome scaling

share|improve this question

edited Mar 26 at 10:08

ketysek

asked Mar 26 at 10:00

ketysekketysek

41011 gold badge77 silver badges2727 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  works fine for me in chrome.
  
  – Mikel Ferreiro
  Mar 26 at 10:04
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  hm ... weird ... maybe the problem is related to retina display?
  
  – ketysek
  Mar 26 at 10:05
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @MikelFerreiro oh cmon ... I've updated chrome from 72 to 73 and it's okay now...
  
  – ketysek
  Mar 26 at 10:08
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm not sure it's a good idea to write things like html font-size: 0.9rem;. The rem is the size of the html element (r stands for root), so you're basically saying that a rem is equal to 0.9 of a rem.
  
  – Mr Lister
  Mar 26 at 14:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @MrLister so you would use font-size: 90% instead? It doesn't seem to behave differently.
  
  – ketysek
  Mar 26 at 16:05
  

  
  
  
  

add a comment | 

we want to make everything on our website sized to 90% of actual proportions (luck we are using rem units), so the easiest solution for us is to write html font-size: 0.9rem; rule. However, we are facing some bugs with scaling in chrome - some elements have greater margin the other, not precise width/height etc. It works great in Safari and Firefox... you can see the example here in fiddle, some buttons have undesirable last 1px height white line instead of background.

edit: well it seems to occur on retina display only

edit 2: I've updated chrome from 72 to 73 and it's okay now

css css3 google-chrome scaling

share|improve this question

edited Mar 26 at 10:08

ketysek

asked Mar 26 at 10:00

ketysekketysek

41011 gold badge77 silver badges2727 bronze badges

css css3 google-chrome scaling

css css3 google-chrome scaling

share|improve this question

edited Mar 26 at 10:08

ketysek

asked Mar 26 at 10:00

ketysekketysek

41011 gold badge77 silver badges2727 bronze badges

share|improve this question

edited Mar 26 at 10:08

ketysek

asked Mar 26 at 10:00

ketysekketysek

41011 gold badge77 silver badges2727 bronze badges

asked Mar 26 at 10:00

ketysekketysek

41011 gold badge77 silver badges2727 bronze badges

asked Mar 26 at 10:00

ketysekketysek

41011 gold badge77 silver badges2727 bronze badges

1 Answer
1

active

oldest

votes

-1

The problem comes with your background. Change it to '#ff0000', and the gap goes away.

If you change your gradient to 'background-image', and then add 'background-color'; your problem appears to be fixed:

.button.primary 
 background-image: linear-gradient(to right, #fac364 0%, #fabe53 50%, #ffb433 100%);
 background-color: #fac364;
 border: 0;

Updated your fiddle: https://jsfiddle.net/kcazfps8/

share|improve this answer

answered Mar 26 at 10:08

joshdoescodejoshdoescode

3944 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's issue with scaling ... I've had problems also with other elements which were not respecting their dimensions and which weren't pixel perfect.
  
  – ketysek
  Mar 26 at 10:11
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It seems updating the version of Chrome fixes the issue - it might still be worth applying this as a fall-back for users that don't have the latest browser version?
  
  – joshdoescode
  Mar 26 at 10:14
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Well you know I mentioned this is not the only one issue in our app while we do scaling ... and we haven't got resources to do some fallbacks for each ui component.
  
  – ketysek
  Mar 26 at 10:18
  
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55354292%2fchrome-scaling-issue-while-using-rem-units%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

-1

The problem comes with your background. Change it to '#ff0000', and the gap goes away.

If you change your gradient to 'background-image', and then add 'background-color'; your problem appears to be fixed:

.button.primary 
 background-image: linear-gradient(to right, #fac364 0%, #fabe53 50%, #ffb433 100%);
 background-color: #fac364;
 border: 0;

Updated your fiddle: https://jsfiddle.net/kcazfps8/

share|improve this answer

answered Mar 26 at 10:08

joshdoescodejoshdoescode

3944 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's issue with scaling ... I've had problems also with other elements which were not respecting their dimensions and which weren't pixel perfect.
  
  – ketysek
  Mar 26 at 10:11
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It seems updating the version of Chrome fixes the issue - it might still be worth applying this as a fall-back for users that don't have the latest browser version?
  
  – joshdoescode
  Mar 26 at 10:14
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Well you know I mentioned this is not the only one issue in our app while we do scaling ... and we haven't got resources to do some fallbacks for each ui component.
  
  – ketysek
  Mar 26 at 10:18
  
  

  
  
  
  

add a comment | 

-1

The problem comes with your background. Change it to '#ff0000', and the gap goes away.

If you change your gradient to 'background-image', and then add 'background-color'; your problem appears to be fixed:

.button.primary 
 background-image: linear-gradient(to right, #fac364 0%, #fabe53 50%, #ffb433 100%);
 background-color: #fac364;
 border: 0;

Updated your fiddle: https://jsfiddle.net/kcazfps8/

share|improve this answer

answered Mar 26 at 10:08

joshdoescodejoshdoescode

3944 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's issue with scaling ... I've had problems also with other elements which were not respecting their dimensions and which weren't pixel perfect.
  
  – ketysek
  Mar 26 at 10:11
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It seems updating the version of Chrome fixes the issue - it might still be worth applying this as a fall-back for users that don't have the latest browser version?
  
  – joshdoescode
  Mar 26 at 10:14
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Well you know I mentioned this is not the only one issue in our app while we do scaling ... and we haven't got resources to do some fallbacks for each ui component.
  
  – ketysek
  Mar 26 at 10:18
  
  

  
  
  
  

add a comment | 

The problem comes with your background. Change it to '#ff0000', and the gap goes away.

If you change your gradient to 'background-image', and then add 'background-color'; your problem appears to be fixed:

.button.primary 
 background-image: linear-gradient(to right, #fac364 0%, #fabe53 50%, #ffb433 100%);
 background-color: #fac364;
 border: 0;

Updated your fiddle: https://jsfiddle.net/kcazfps8/

share|improve this answer

answered Mar 26 at 10:08

joshdoescodejoshdoescode

3944 bronze badges

.button.primary 
 background-image: linear-gradient(to right, #fac364 0%, #fabe53 50%, #ffb433 100%);
 background-color: #fac364;
 border: 0;

share|improve this answer

answered Mar 26 at 10:08

joshdoescodejoshdoescode

3944 bronze badges

answered Mar 26 at 10:08

joshdoescodejoshdoescode

3944 bronze badges

answered Mar 26 at 10:08

joshdoescodejoshdoescode

3944 bronze badges