Responsively-app: CSS media query weird match behavior using min-width

Created on 10 Jul 2020 · 5Comments · Source: responsively-org/responsively-app

environment

Responsively 0.6.1
Ubuntu 20.04 based Linux

problem

In order to match a device width using (min-width: 768px) (iPad) media query I have to write 762 instead of 768. Same with other values for given rule.

reproduction

Let's match 5 built-in devices: iPhone 5/SE (default, 320x568), iPhone X (375x812), iPad (768x1024), iPad Pro (1024x1366), Laptop HiDPI (1440x900)

markup

<div class="test"></div>

media queries (original)

Note: I use PostCSS nested properties syntax for brevity, but it behaves the same with correct CSS3 version

body {
  margin: 0;
}

.test {
  width: 100vw;
  height: 100vh;
  background: white;

  @media (min-width: 375px) {
    background: purple;
  }

  @media (min-width: 768px) {
    background: red;
  }

  @media (min-width: 1024px) {
    background: green;
  }

  @media (min-width: 1440px) {
    background: blue;
  }
}

result (colors mismatch)

Screenshot from 2020-07-10 18-16-32

media queries (subtracted 6px)

.test {
  width: 100vw;
  height: 100vh;
  background: white;

  @media (min-width: 369px) {
    background: purple;
  }

  @media (min-width: 762px) {
    background: red;
  }

  @media (min-width: 1018px) {
    background: green;
  }

  @media (min-width: 1434px) {
    background: blue;
  }
}

result (now colors match)

Screenshot from 2020-07-10 18-17-29

PS: images are clickable

Update: added app version

bug

Source

amankkg

👍1

Most helpful comment

I've investigated this issue a little bit and it seems that the problem is that the scrollbar size is not being taken into account so the actual viewport size is lower than the device.

On this screenshot I'm with a 375 px width iPhone X but the body size is only 354 px.

Screen Shot 2020-07-16 at 19 32 10

@manojVivek I've played around a little bit with the WebView component adding that extra width to the devices and it worked but I'm not sure if it's the best approach. I'm not familiarized with the entire architecture. Also not sure how it will look for other OS than MacOS.

sebasrodriguez on 17 Jul 2020

👍3

All 5 comments

This happens on both v0.6.0 and v0.6.1 versions.

ruisaraiva19 on 10 Jul 2020

👍3

I've investigated this issue a little bit and it seems that the problem is that the scrollbar size is not being taken into account so the actual viewport size is lower than the device.

On this screenshot I'm with a 375 px width iPhone X but the body size is only 354 px.

Screen Shot 2020-07-16 at 19 32 10

sebasrodriguez on 17 Jul 2020

👍3

Bug persists in 0.7.0. It seems to be connected to the value of the "responsive" checkbox. I created a custom iPad size, 768x1024, checked the responsive box, and the <body> gets the correct width of 768px.

With the box unchecked it's consistently about 5-6 pixels short of the declared width.

andronocean on 18 Jul 2020

👍2

@ruisaraiva19 @sebasrodriguez @andronocean Hey guys, thanks for the triage information.

With all the info, I'm able to figure out the cause for the issue, it is because of the 3px device border, that is shrinking the device width by 6px. I'll make a fix for this.