Forum Discussion

ArashLaylazi's avatar
ArashLaylazi
Copper Contributor
Jun 21, 2019

Bug: Edge Dev + FlexBox + RTL Direction = Incorrect Layout

Hi.

I apologize in advance, I'm not good in English.

Recently, I have tried to implement RTL layouts using flexbox.
I have used https://getbootstrap.com/docs/4.3/layout/grid/ that has been implemented based on flexbox.

On Edge Dev, in LTR direction, flexbox oriented layouts have been showing pretty good.
But in RTL direction, they have some offset from right side of their container element.
I have created an example https://jsfiddle.net/perseusthegreat/6cygnhLx/4/ to show this situation.
I have tested on

  • Firefox 67.0.4
  • Chrome 75.0.3770.100
  • IE 11.0.130
  • Edge 18.18362
  • and Edge Dev 77.0.189.3.

Every things are OK on all browsers except Edge Dev.
So, please consider it.

 

Thanks.

8 Replies

  • On both Google Chrome version 75.0.3770.100 and Edge Canary version 77.0.200.1, I see no difference in layouts:

     

    Google Chrome v. 75.0.3770.100

    Edge Canary v. 77.0.200.1

    Since you're using Edge Dev, I'd recommend you to install Edge Canary and check if the issue still persists and report back with the status.

    • ArashLaylazi's avatar
      ArashLaylazi
      Copper Contributor

      Deleted , I have installed Edge Canary.

      It seems the problem has been resolved.

      I hope this change will be applied to next releases of other "Edge Insider Channels".

      Thank you for informing me.

  • johnjansen's avatar
    johnjansen
    Former Employee

    ArashLaylazi thanks so much for including that sample code, that is super helpful. Your English was fine, I think I understand the issue. However, I looked on Firefox and Chrome and Edge and I'm seeing any difference I can identify. Can you possibly include a screenshot of the rendering you see in Edge that is broken? 

     

    -John

    • ArashLaylazi's avatar
      ArashLaylazi
      Copper Contributor

      johnjansen

       

      Thanks for your attention.

      These are screenshots:

      Firefox

       

      Chrome

       

      Edge 18

       

      IE (JSFiddle does not support IE)

       

      Edge Dev

       

      Also, my Windows culture had been set as Persian (RTL culture).

      • johnjansen's avatar
        johnjansen
        Former Employee

        ArashLaylazi wow! Thanks so much for including the screenshots. On my current build, I am not seeing that rendering in Edge, for me it matches the shots you included from the other browsers. I even installed the Persian Language pack to force RTL at the system. Can you confirm what build of Edge you are on?

Resources