1

This one is a rather weird question, but please help me to find at least a solution or a possibility.

On our website we have some sort of round button with a centered "+", which opens a set of other buttons to the bottom when clicked on.

These popped up buttons only have icons as centered content, each fitting to 24px width and height. For centering we use the method with left: 50% and top:50% as well as transform:translate(-12px,-12px) - the usual centering apart from flexbox methods.

On all our tests these icons where fairly centered (of course there is always some pixel differences with crossbrowser and crossdevice).

Now the last problem remaining is, that on Lenovo ThinkPads (browser of choice) the icons are far off the position they should be; like 5 to 6 pixels to the left or bottom. We could not figure out how we can fix this problem to this day.

On any other device, let it be a Laptop or a PC stationary with the same installed Windows and browsers, it is displaying as intended.

My question now: Does anyone have an idea WHY the Lenovo ThinkPads are displaying these icons differently? Is there something Lenovo ThinkPads are rendering differently or is it the DPI or something else we are just unaware of?

Many thanks for your possible answers.

JJJ
  • 32,902
  • 20
  • 89
  • 102
Mentenyia
  • 211
  • 1
  • 4
  • 10
  • 1
    It might be an issue because of [device pixel ratio](https://stackoverflow.com/questions/8785643/what-exactly-is-device-pixel-ratio) – bhansa Oct 24 '17 at 09:13

2 Answers2

2

You should check the device pixel ratio of your device, There are some cases when it causes a problem even if you use translate and proper pixels.

This website can help you get the details.

Target them using media queries and variable pixel ratios: 

@media only screen and (min-device-pixel-ratio: 2) {
      /* your code */
}
bhansa
  • 7,282
  • 3
  • 30
  • 55
  • Hi @bhansa, this would affect the whole website though, wouldn't it? The problem is just the icons in the round buttons, the rest of the website is like intended... And on other Windows PCs with the same ratio it works finde. – Mentenyia Oct 24 '17 at 09:41
  • I am not completely aware of the situation you are facing, but I had the case where only one footer pagination button was behaving differently. This answer might not solve the problem completely but gives you an idea about this problem, Thanks. – bhansa Oct 24 '17 at 09:51
  • 1
    we will certainly give this a try and let you know of the outcome :) – Mentenyia Oct 24 '17 at 09:53
  • Hello again, this didn't change anything about our initial problem with only lenovo laptops. Thanks anyways for the hint! We included the code at many points. – Mentenyia Nov 13 '17 at 10:55
  • Thanks for telling, Keep searching you'll get something about the issue. See if other users have faced the same. – bhansa Nov 13 '17 at 10:57
0

Hello all interested people,

We've discovered the issue in the font-family: "Material Icons". This CSS adds unnatural behaviour on Lenovo ThinkPads, adding weird whitespace on the right side of some icons.

Thank you for your suggestions and help :) Much appreciated.

Mentenyia
  • 211
  • 1
  • 4
  • 10