Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS media query weird match behavior using min-width #302

Closed
amankkg opened this issue Jul 10, 2020 · 5 comments · Fixed by #331
Closed

CSS media query weird match behavior using min-width #302

amankkg opened this issue Jul 10, 2020 · 5 comments · Fixed by #331
Assignees
@manojVivek
Labels
bug Something isn't working
Projects
App Roadmap
Milestone
v0.8.0

Comments

@amankkg
Copy link

amankkg commented Jul 10, 2020 •
edited
Loading

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
@manojVivek manojVivek added the awaiting triage Needs debugging to know the root cause label Jul 10, 2020
@manojVivek manojVivek added this to New in App Roadmap via automation Jul 10, 2020
@manojVivek manojVivek added the help wanted Extra attention is needed label Jul 10, 2020
@manojVivek manojVivek moved this from New to Higher-Priority Items in App Roadmap Jul 10, 2020
@ruisaraiva19
Copy link
Contributor

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

@sebasrodriguez
Copy link
Contributor

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.

@andronocean
Copy link

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.

@manojVivek
Copy link
Collaborator

@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.

@manojVivek manojVivek self-assigned this Jul 19, 2020
@manojVivek manojVivek mentioned this issue Jul 19, 2020
Merged
@manojVivek
Copy link
Collaborator

Results after the fix:
Screenshot 2020-07-19 at 9 02 09 AM

@amankkg Thanks for reporting it, this will go live in the next release.

@manojVivek manojVivek added this to the v0.8.0 milestone Jul 19, 2020
@manojVivek manojVivek moved this from Higher-Priority Items to Ready for Release in App Roadmap Jul 19, 2020
@manojVivek manojVivek added bug Something isn't working and removed awaiting triage Needs debugging to know the root cause help wanted Extra attention is needed labels Jul 22, 2020
@manojVivek manojVivek moved this from Ready for Release to Release v0.8.0 in App Roadmap Jul 22, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@manojVivek manojVivek

Labels
bug Something isn't working
Projects
No open projects
App Roadmap
  
Release v0.8.0
Milestone
v0.8.0
Development

Successfully merging a pull request may close this issue.

Device width bug fix responsively-org/responsively-app
5 participants
@manojVivek @sebasrodriguez @amankkg @ruisaraiva19 @andronocean