Width mismatch for certain elements in certain layouts

Question

I was using the Galen framework for layout testing and here is the issue, I come across. Kindly provide me your inputs to proceed along

Galen version: 2.4.4

Usage: Maven project with Java

Verification method

LayoutReport layout = Galen.checkLayout(getDriver(), getGspecpath(), Arrays.asList(resolution));

Layouts issue is occurring in the following layouts

• Tablet Portrait - 768 X 1024
• Tablet Landscape - 1024 X 768
• Mobile Portrait - 360 X 640
• Mobile Landscape - 640 X 360
• Mobile 2 Portrait - 414 X 896

Layouts issue is not occurring in

• Mobile 2 Landscape portrait - 896 X 414
• All desktop layouts 1366, 1980, 2560 etc.

Usage

1. Uses the arguments in chrome options to make the browser accommodate larger resolution in my 1920X1080 laptop resolution

   options.addArguments("force-device-scale-factor=0.60");
   options.addArguments("high-dpi-support=0.60");
   

   Note: Verified by commenting the 1st step too

2. Uses Selenium manage.window method to resize the browser

   getDriver().manage().window().setSize(dimension);
   

Issue description

1. I have a login page with a few elements in it.
2. I am checking the element's attributes in different layouts using the above mentioned checkLayout method
3. While verifying the element using chrome simulator (i.e, in dev tools -> select toggle device toolbar) and select the tablet resolution i.e. 768X1024 (or a few other resolutions listed above)
4. The element has a width (say 395px for username field) in the chrome simulator.
5. I have used the same in galenspec and verify for the layout
6. Galen says the element is having an issue and shows different width (507px)

While debugging it is found that it is showing up the wrong image location in the report too.

HTML source

<div class="input-wrapper grm-form-group floating">
   <input id="loginUsername" type="text" name="username" class="loginField" tabindex="0" required="">
   <label for="loginUsername">Username</label>
</div>

CSS

.grm-form .grm-form-group {
    position: relative;
    margin-bottom: 24px;
}