Orientation change issue

[ou-di]

Orientation change value is always one step back. E.g on portrait mode on load the value ist 'portrait'. On first orientation change (from portrait to landscape) nothing happens (should be landscape). On second orientation change (from landscape to portrait) the value is changed to 'landscape'. Can someone confirm the issue? I'm using the current release 4.3.5

[ischoe]

having the same issue, but only on android mobile phones...

[AlecAivazis]

Hey @ou-di @ischoe thanks for reporting this. I'm going to try to reproduce this in the next few weeks. We rely on the orientationchange window event here in order to detect that the orientation actually changed. Could either of you try to register a callback for that event in your projects and see if it actually fires?

Also, is this with react-native or just on the web browser of android phones?

[AlecAivazis]

This might be related to #96 although it seems like other users are reporting the exact opposite behavior (works on android, not IOS) 🤔

[ou-di]

@AlecAivazis I think the issue is the matchMedia method. To answer your question, it's on the mobile web browser.

[JesusADS]

Hi! I'm having problems with the orientation also, but my problem is that it's staying in "null". This produce that any other attribute isn't being calculated and stays in "infinity", causing wrong behaviours on mobile.

This is my browser object on first load (happens only like 40% of the times):

  browser: {
    _responsiveState: true,
    lessThan: {
      extraSmall: false,
      small: false,
      medium: false,
      large: false,
      extraLarge: false,
      infinity: false
    },
    greaterThan: {
      extraSmall: true,
      small: true,
      medium: true,
      large: true,
      extraLarge: true,
      infinity: false
    },
    is: {
      extraSmall: false,
      small: false,
      medium: false,
      large: false,
      extraLarge: false,
      infinity: true
    },
    mediaType: 'infinity',
    orientation: null,
    breakpoints: {
      extraSmall: 320,
      small: 640,
      medium: 768,
      large: 960,
      extraLarge: 1200,
      infinity: null
    }
  }

[ghost]

Hi, I've the same problem as @JesusADS.

[AlecAivazis]

Hey @dmansof, @JesusADS - I'm sorry yuo're running into issues with orientation detection. Can you please tell me what browsers you are using?

[JesusADS]

Hi @AlecAivazis , i'm using Chrome V67.0.3396.79

[jordxn]

Hi, I can replicate this issue on chrome 68 using developer tools device mode.

I think the issue is the following;

"the event [orientationchange] is triggered before the rotation is complete. Therefore, the recorded height reflects the state before the actual orientation change." https://stackoverflow.com/questions/12452349/mobile-viewport-height-after-orientation-change/26829372#26829372

So this would include the matchMedia() you run in your reducer. So we need to wait a little before firing refreshResponsiveState until the height/width have actually changed. There's a few decent solutions in that stack overflow link.