Home

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

%3CLINGO-SUB%20id%3D%22lingo-sub-714493%22%20slang%3D%22en-US%22%3EBug%3A%20Edge%20Dev%20%2B%20FlexBox%20%2B%20RTL%20Direction%20%3D%20Incorrect%20Layout%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-714493%22%20slang%3D%22en-US%22%3E%3CP%3EHi.%3C%2FP%3E%3CP%3EI%20apologize%20in%20advance%2C%20I'm%20not%20good%20in%20English.%3CBR%20%2F%3E%3CBR%20%2F%3ERecently%2C%20I%20have%20tried%20to%20implement%20RTL%20layouts%20using%20flexbox.%3CBR%20%2F%3EI%20have%20used%20%3CA%20href%3D%22https%3A%2F%2Fgetbootstrap.com%2Fdocs%2F4.3%2Flayout%2Fgrid%2F%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3EBootstrap%204.3.1%20grid%20system%3C%2FA%3E%20that%20has%20been%20implemented%20based%20on%26nbsp%3Bflexbox.%3C%2FP%3E%3CP%3EOn%20Edge%20Dev%2C%20in%20LTR%20direction%2C%20flexbox%20oriented%20layouts%20have%20been%20showing%20pretty%20good.%3CBR%20%2F%3EBut%20in%20RTL%20direction%2C%20they%20have%20some%20offset%20from%20right%20side%20of%20their%20container%20element.%3CBR%20%2F%3EI%20have%20created%20an%20example%20%3CA%20href%3D%22https%3A%2F%2Fjsfiddle.net%2Fperseusthegreat%2F6cygnhLx%2F4%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehere%3C%2FA%3E%20to%20show%20this%20situation.%3CBR%20%2F%3EI%20have%20tested%20on%3C%2FP%3E%3CUL%3E%3CLI%3EFirefox%2067.0.4%3C%2FLI%3E%3CLI%3EChrome%20%3CSPAN%3E75.0.3770.100%3C%2FSPAN%3E%3C%2FLI%3E%3CLI%3EIE%2011.0.130%3C%2FLI%3E%3CLI%3EEdge%2018.18362%3C%2FLI%3E%3CLI%3Eand%20Edge%20Dev%20%3CSPAN%3E77.0.189.3%3C%2FSPAN%3E.%3C%2FLI%3E%3C%2FUL%3E%3CP%3EEvery%20things%20are%20OK%20on%20all%20browsers%20except%20Edge%20Dev.%3CBR%20%2F%3ESo%2C%20please%20consider%20it.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-715071%22%20slang%3D%22en-US%22%3ERe%3A%20Bug%3A%20Edge%20Dev%20%2B%20FlexBox%20%2B%20RTL%20Direction%20%3D%20Incorrect%20Layout%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-715071%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F364644%22%20target%3D%22_blank%22%3E%40ArashLaylazi%3C%2FA%3E%26nbsp%3Bthanks%20so%20much%20for%20including%20that%20sample%20code%2C%20that%20is%20super%20helpful.%20Your%20English%20was%20fine%2C%20I%20think%20I%20understand%20the%20issue.%20However%2C%20I%20looked%20on%20Firefox%20and%20Chrome%20and%20Edge%20and%20I'm%20seeing%20any%20difference%20I%20can%20identify.%20Can%20you%20possibly%20include%20a%20screenshot%20of%20the%20rendering%20you%20see%20in%20Edge%20that%20is%20broken%3F%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E-John%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-715094%22%20slang%3D%22en-US%22%3ERe%3A%20Bug%3A%20Edge%20Dev%20%2B%20FlexBox%20%2B%20RTL%20Direction%20%3D%20Incorrect%20Layout%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-715094%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F318459%22%20target%3D%22_blank%22%3E%40johnjansen%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20for%20your%20attention.%3C%2FP%3E%3CP%3EThese%20are%20screenshots%3A%3C%2FP%3E%3CDIV%20class%3D%22clearfix%22%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F120304i37AF52BB30B2524C%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22firefox.png%22%20title%3D%22firefox.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EFirefox%3C%2FSPAN%3E%3C%2FSPAN%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FDIV%3E%3CDIV%20class%3D%22clearfix%22%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F120305i7FF3D96618B764A9%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22chrome.png%22%20title%3D%22chrome.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EChrome%3C%2FSPAN%3E%3C%2FSPAN%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FDIV%3E%3CDIV%20class%3D%22clearfix%22%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F120306iFCC668F9A80673B3%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22edgehtml.png%22%20title%3D%22edgehtml.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EEdge%2018%3C%2FSPAN%3E%3C%2FSPAN%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FDIV%3E%3CDIV%20class%3D%22clearfix%22%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F120302iF36E9418810AC781%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22ie.png%22%20title%3D%22ie.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EIE%20(JSFiddle%20does%20not%20support%20IE)%3C%2FSPAN%3E%3C%2FSPAN%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FDIV%3E%3CDIV%20class%3D%22clearfix%22%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F120303iC272C3B259528FFA%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22edgedev.png%22%20title%3D%22edgedev.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EEdge%20Dev%3C%2FSPAN%3E%3C%2FSPAN%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FDIV%3E%3CP%3EAlso%2C%20my%20Windows%20culture%20had%20been%20set%20as%20Persian%20(RTL%20culture).%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-715419%22%20slang%3D%22en-US%22%3ERe%3A%20Bug%3A%20Edge%20Dev%20%2B%20FlexBox%20%2B%20RTL%20Direction%20%3D%20Incorrect%20Layout%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-715419%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F364644%22%20target%3D%22_blank%22%3E%40ArashLaylazi%3C%2FA%3E%26nbsp%3Bwow!%20Thanks%20so%20much%20for%20including%20the%20screenshots.%20On%20my%20current%20build%2C%20I%20am%20not%20seeing%20that%20rendering%20in%20Edge%2C%20for%20me%20it%20matches%20the%20shots%20you%20included%20from%20the%20other%20browsers.%20I%20even%20installed%20the%20Persian%20Language%20pack%20to%20force%20RTL%20at%20the%20system.%20Can%20you%20confirm%20what%20build%20of%20Edge%20you%20are%20on%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-715463%22%20slang%3D%22en-US%22%3ERe%3A%20Bug%3A%20Edge%20Dev%20%2B%20FlexBox%20%2B%20RTL%20Direction%20%3D%20Incorrect%20Layout%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-715463%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F318459%22%20target%3D%22_blank%22%3E%40johnjansen%3C%2FA%3E%26nbsp%3B%2C%20sure%2C%20I%20am%20using%20%3CU%3EEdge%20%3C%2FU%3E%3CSPAN%3E%3CU%3EVersion%2077.0.189.3%20(Official%20build)%20dev%20(64-bit)%3C%2FU%3E%20now.%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F120354i57D8548623AFEEF7%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22edgedev-version.png%22%20title%3D%22edgedev-version.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EEdge%20Dev%20-%20Version%2077.0.189.3%20(Official%20build)%20dev%20(64-bit)%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EAlso%2C%20my%20Windows%2010%20version%20is%201903%20build%2018362.175%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20460px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F120355iF2FFB641E08486F1%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22winver.png%22%20title%3D%22winver.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-718802%22%20slang%3D%22en-US%22%3ERe%3A%20Bug%3A%20Edge%20Dev%20%2B%20FlexBox%20%2B%20RTL%20Direction%20%3D%20Incorrect%20Layout%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-718802%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F364644%22%20target%3D%22_blank%22%3E%40ArashLaylazi%3C%2FA%3E%26nbsp%3BThanks%20for%20filing%20the%20issue.%20The%20issue%20is%20not%20unique%20to%20Edge%20and%20you%20can%20repro%20it%20by%20enabling%20LayoutNG%20in%20the%20experimental%20flags%20of%20Chrome%20as%20well.%26nbsp%3B%3C%2FP%3E%0A%3CP%3EWe%20will%20file%20a%20bug%20directly%20into%20Chromium%20and%20fix%20it%20there%20for%20everyone.%20Thanks.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-718927%22%20slang%3D%22en-US%22%3ERe%3A%20Bug%3A%20Edge%20Dev%20%2B%20FlexBox%20%2B%20RTL%20Direction%20%3D%20Incorrect%20Layout%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-718927%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F365936%22%20target%3D%22_blank%22%3E%40RossenAtanassov%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20hope%20this%20issue%20will%20be%20resolved%20ASAP.%3CBR%20%2F%3EEdgeHtml%20was%20great%2C%20also%20new%20Edge%20(Chromium).%3CBR%20%2F%3E%3CSPAN%3EThanks%20for%20your%20considerations.%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-719238%22%20slang%3D%22en-US%22%3ERe%3A%20Bug%3A%20Edge%20Dev%20%2B%20FlexBox%20%2B%20RTL%20Direction%20%3D%20Incorrect%20Layout%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-719238%22%20slang%3D%22en-US%22%3E%3CP%3EOn%20both%20Google%20Chrome%20version%26nbsp%3B%3CSPAN%3E75.0.3770.100%20and%20Edge%20Canary%20version%26nbsp%3B77.0.200.1%2C%20I%20see%20no%20difference%20in%20layouts%3A%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F120553i14142942B4251667%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Annotation%202019-06-25%20141325.png%22%20title%3D%22Annotation%202019-06-25%20141325.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EGoogle%20Chrome%20v.%2075.0.3770.100%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F120552i749E999366FCD430%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Annotation%202019-06-25%20141635.png%22%20title%3D%22Annotation%202019-06-25%20141635.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EEdge%20Canary%20v.%2077.0.200.1%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3ESince%20you're%20using%20Edge%20Dev%2C%20I'd%20recommend%20you%20to%20install%20Edge%20Canary%20and%20check%20if%20the%20issue%20still%20persists%20and%20report%20back%20with%20the%20status.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-719294%22%20slang%3D%22en-US%22%3ERe%3A%20Bug%3A%20Edge%20Dev%20%2B%20FlexBox%20%2B%20RTL%20Direction%20%3D%20Incorrect%20Layout%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-719294%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F99713%22%20target%3D%22_blank%22%3E%40Subhadeep%20Dey%3C%2FA%3E%26nbsp%3B%2C%20I%20have%20installed%20Edge%20Canary.%3C%2FP%3E%3CP%3EIt%20seems%20the%20problem%20has%20been%20resolved.%3C%2FP%3E%3CP%3EI%20hope%20this%20change%20will%20be%20applied%20to%20next%20releases%20of%20other%20%22Edge%20Insider%20Channels%22.%3C%2FP%3E%3CP%3EThank%20you%20for%20informing%20me.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Contributor

Hi.

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

Recently, I have tried to implement RTL layouts using flexbox.
I have used Bootstrap 4.3.1 grid system 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 here 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
Highlighted

@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

Highlighted

@johnjansen

 

Thanks for your attention.

These are screenshots:

FirefoxFirefox

 

ChromeChrome

 

Edge 18Edge 18

 

IE (JSFiddle does not support IE)IE (JSFiddle does not support IE)

 

Edge DevEdge Dev

 

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

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

Highlighted

@johnjansen , sure, I am using Edge Version 77.0.189.3 (Official build) dev (64-bit) now.

Edge Dev - Version 77.0.189.3 (Official build) dev (64-bit)Edge Dev - Version 77.0.189.3 (Official build) dev (64-bit)

Also, my Windows 10 version is 1903 build 18362.175

winver.png

Highlighted

@ArashLaylazi Thanks for filing the issue. The issue is not unique to Edge and you can repro it by enabling LayoutNG in the experimental flags of Chrome as well. 

We will file a bug directly into Chromium and fix it there for everyone. Thanks.

 

 

Highlighted

@RossenAtanassov 

I hope this issue will be resolved ASAP.
EdgeHtml was great, also new Edge (Chromium).
Thanks for your considerations.

Highlighted

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.100Google Chrome v. 75.0.3770.100

Edge Canary v.  77.0.200.1Edge 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.

Highlighted

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