[i18n] Edge bug: transform-origin does not work as expected for RTL divs

%3CLINGO-SUB%20id%3D%22lingo-sub-1597531%22%20slang%3D%22en-US%22%3E%5Bi18n%5D%20Edge%20bug%3A%20transform-origin%20does%20not%20work%20as%20expected%20for%20RTL%20divs%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1597531%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20Edge%20folks%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20hope%20this%20is%20the%20right%20place%20to%20leave%20a%20bug%20report.%20If%20it%20is%20not%2C%20please%20direct%20me%20to%20the%20right%20place.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIE%20Edge%20has%20inconsistent%20behavior%20compared%20to%20Chrome%2FFirefox%20when%20transforms%20are%20applied%20to%20divs%20with%20css%20direction%3A%20rtl.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHere%20is%20a%20minimal%20example%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fcodepen.io%2Fsibneriangoog%2Fpen%2FQWNKwpy%22%20target%3D%22_blank%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%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fcodepen.io%2Fsibneriangoog%2Fpen%2FQWNKwpy%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIn%20Chrome%2C%20the%20interior%20div%20is%20displayed%20in%20the%20top%20right%20corner.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22f2877cca-06f0-4fdb-ad3e-e97a878de495.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F213206i1218431D3090EE74%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22f2877cca-06f0-4fdb-ad3e-e97a878de495.png%22%20alt%3D%22f2877cca-06f0-4fdb-ad3e-e97a878de495.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIn%20Edge%2C%20the%20transform%20is%20applied%20from%20the%20opposite%20side%20and%20it%20is%20displayed%20with%20an%20offset.%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Capture.PNG%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F213207iCF39067162BE610E%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22Capture.PNG%22%20alt%3D%22Capture.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1605393%22%20slang%3D%22en-US%22%3ERe%3A%20%5Bi18n%5D%20Edge%20bug%3A%20transform-origin%20does%20not%20work%20as%20expected%20for%20RTL%20divs%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1605393%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F763782%22%20target%3D%22_blank%22%3E%40sibnerian%3C%2FA%3E%3C%2FP%3E%3CP%3EHi%20there%2C%20you%20are%20welcome%20to%20the%20%3CSTRONG%3EMicrosoft%20Edge%20Insider%3C%2FSTRONG%3E%20Community%20Hub!%3C%2FP%3E%3CP%3EThanks%20for%20reporting%20the%20issue%20here.%20I%20would%20recommend%20you%20to%20send%20feedback%20about%20this%20bug%20through%20the%20in-app%20feedback%20tool%20in%20Microsoft%20Edge%20(%3CI%3EAlt%2BShift%2BI%3C%2FI%3E)%20with%20the%20diagnostics%20attached%20in%20order%20to%20help%20the%20%3CSTRONG%3EMicrosoft%20Edge%20dev%20team%3C%2FSTRONG%3E%20to%20resolve%20your%20issue%20as%20soon%20as%20possible.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1747457%22%20slang%3D%22en-US%22%3ERe%3A%20%5Bi18n%5D%20Edge%20bug%3A%20transform-origin%20does%20not%20work%20as%20expected%20for%20RTL%20divs%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1747457%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F537238%22%20target%3D%22_blank%22%3E%40theshaunsaw%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EJust%20tried%20to%20submit%20feedback.%20Unfortunately%2C%20I%20can't%20do%20so%20since%20I'm%20on%20a%20machine%20with%20enterprise%20provisioning%20that%20prevents%20sharing%20any%20diagnostic%20details%20or%20other%20tracking%20information.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIf%20you'd%20kindly%20help%20me%20by%20submitting%20a%20feedback%20on%20my%20behalf%20with%20the%20original%20details%20provided%20(including%20a%20minimal%20reproduction%20for%20the%20issue!)%2C%20I%20would%20appreciate%20it.%20If%20that's%20not%20possible%2C%20I%20can%20try%20to%20escalate%20the%20diagnostics%20data%20permissions%20with%20my%20IT%20department%2C%20but%20I'm%20not%20optimistic%20about%20that.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1757989%22%20slang%3D%22en-US%22%3ERe%3A%20%5Bi18n%5D%20Edge%20bug%3A%20transform-origin%20does%20not%20work%20as%20expected%20for%20RTL%20divs%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1757989%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F763782%22%20target%3D%22_blank%22%3E%40sibnerian%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20can%20do%20it%20but%20I%20am%20new%20to%20Web%20Developing%20so%20I%20am%20not%20understanding%20your%20issue%2C%20Sorry.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ETagging%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F484598%22%20target%3D%22_blank%22%3E%40fawkes%3C%2FA%3E%2C%20our%20community%20manager%20and%26nbsp%3B%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%2C%20Engineer%20working%20on%20Microsoft%20Edge%20who%20I%20think%20can%20help%20you%26nbsp%3B%3CIMG%20class%3D%22lia-deferred-image%20lia-image-emoji%22%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Fhtml%2Fimages%2Femoticons%2Fsmile_40x40.gif%22%20alt%3D%22%3Asmile%3A%22%20title%3D%22%3Asmile%3A%22%20%2F%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1759646%22%20slang%3D%22en-US%22%3ERe%3A%20%5Bi18n%5D%20Edge%20bug%3A%20transform-origin%20does%20not%20work%20as%20expected%20for%20RTL%20divs%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1759646%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F763782%22%20target%3D%22_blank%22%3E%40sibnerian%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3EFWIW%2C%20I%20can't%20reproduce%20this%20using%20your%20pen%2C%20which%20means%20I%20get%20something%20resembling%20your%20Chrome%20image%2C%20not%20your%20Edge%20one.%20But%20then%2C%20I%20don't%20really%20know%20what%20I'm%20looking%20for.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESince%20you%20can't%20submit%20feedback%2C%20you%20should%20be%20able%20open%20a%20ticket%20here%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fmicrosoftedgesupport.microsoft.com%2Fhc%2Fen-us%2Frequests%2Fnew%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3ESubmit%20a%20request%20%E2%80%93%20Microsoft%20Edge%20Insider%20Support%3C%2FA%3E.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1759839%22%20slang%3D%22en-US%22%3ERe%3A%20%5Bi18n%5D%20Edge%20bug%3A%20transform-origin%20does%20not%20work%20as%20expected%20for%20RTL%20divs%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1759839%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F537238%22%20target%3D%22_blank%22%3E%40theshaunsaw%3C%2FA%3E%26nbsp%3Bthanks%20for%20tagging%20me.%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F763782%22%20target%3D%22_blank%22%3E%40sibnerian%3C%2FA%3E%26nbsp%3BI%20believe%20you%20are%20talking%20about%20the%20old%20Edge%20browser%2C%20not%20the%20new%20one%2C%20is%20that%20correct%3F%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E-John%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1760016%22%20slang%3D%22en-US%22%3ERe%3A%20%5Bi18n%5D%20Edge%20bug%3A%20transform-origin%20does%20not%20work%20as%20expected%20for%20RTL%20divs%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1760016%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%3Bthere's%20a%20decent%20chance%20this%20is%20the%20%22old%22%20edge%20browser%20(before%20Chromium%20edge).%20That'd%20explain%20why%20it's%20not%20reproducible%20for%20Noel%2C%20but%20I%20can%20consistently%20repro.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHere's%20the%20version%20number%3A%3C%2FP%3E%3CP%3EMicrosoft%20Edge%2044.18362.449.0%3C%2FP%3E%3CP%3EMicrosoft%20EdgeHTML%2018.18362%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1760256%22%20slang%3D%22en-US%22%3ERe%3A%20%5Bi18n%5D%20Edge%20bug%3A%20transform-origin%20does%20not%20work%20as%20expected%20for%20RTL%20divs%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1760256%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F763782%22%20target%3D%22_blank%22%3E%40sibnerian%3C%2FA%3E%26nbsp%3Byes%2C%20that's%20the%20old%20Edge%20browser.%20I'll%20make%20sure%20this%20is%20logged%20there%2C%20but%20to%20set%20expectations%3A%20we%20are%20not%20planning%20on%20doing%20bug%20fixes%20in%20the%20old%20Edge%20engine.%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-1760417%22%20slang%3D%22en-US%22%3ERe%3A%20%5Bi18n%5D%20Edge%20bug%3A%20transform-origin%20does%20not%20work%20as%20expected%20for%20RTL%20divs%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1760417%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%3Breasonable%2C%20I'll%20make%20sure%20our%20workaround%20is%20applied%20only%20to%20pre-Chromium%20Edge.%20Glad%20it's%20WAI%20in%20the%20latest%20version.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks!%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
New Contributor

Hi Edge folks,

 

I hope this is the right place to leave a bug report. If it is not, please direct me to the right place.

 

IE Edge has inconsistent behavior compared to Chrome/Firefox when transforms are applied to divs with css direction: rtl.

 

Here is a minimal example: https://codepen.io/sibneriangoog/pen/QWNKwpy

 

In Chrome, the interior div is displayed in the top right corner.

 

f2877cca-06f0-4fdb-ad3e-e97a878de495.png

 

In Edge, the transform is applied from the opposite side and it is displayed with an offset.

Capture.PNG

8 Replies
Highlighted

@sibnerian

Hi there, you are welcome to the Microsoft Edge Insider Community Hub!

Thanks for reporting the issue here. I would recommend you to send feedback about this bug through the in-app feedback tool in Microsoft Edge (Alt+Shift+I) with the diagnostics attached in order to help the Microsoft Edge dev team to resolve your issue as soon as possible.

Highlighted

@TheShaunSaw 

 

Just tried to submit feedback. Unfortunately, I can't do so since I'm on a machine with enterprise provisioning that prevents sharing any diagnostic details or other tracking information.

 

If you'd kindly help me by submitting a feedback on my behalf with the original details provided (including a minimal reproduction for the issue!), I would appreciate it. If that's not possible, I can try to escalate the diagnostics data permissions with my IT department, but I'm not optimistic about that.

Highlighted

@sibnerian 

I can do it but I am new to Web Developing so I am not understanding your issue, Sorry.

 

Tagging @fawkes, our community manager and @johnjansen, Engineer working on Microsoft Edge who I think can help you :smile:

Highlighted

@sibnerian 

FWIW, I can't reproduce this using your pen, which means I get something resembling your Chrome image, not your Edge one. But then, I don't really know what I'm looking for.

 

Since you can't submit feedback, you should be able open a ticket here: Submit a request – Microsoft Edge Insider Support

Highlighted

@TheShaunSaw thanks for tagging me. @sibnerian I believe you are talking about the old Edge browser, not the new one, is that correct?

 

-John 

Highlighted

@johnjansen there's a decent chance this is the "old" edge browser (before Chromium edge). That'd explain why it's not reproducible for Noel, but I can consistently repro.

 

Here's the version number:

Microsoft Edge 44.18362.449.0

Microsoft EdgeHTML 18.18362

 

 

Highlighted

@sibnerian yes, that's the old Edge browser. I'll make sure this is logged there, but to set expectations: we are not planning on doing bug fixes in the old Edge engine. 

 

-John

Highlighted

@johnjansen reasonable, I'll make sure our workaround is applied only to pre-Chromium Edge. Glad it's WAI in the latest version.

 

Thanks!