Browser issue Admin options "dataList-row:hover" in RTL shifted to the right

[Fethi.dz]

Affected version

XF2.1 Beta 2

Hello,

In RTL "AR" the hover background of the data list in the Admin Options shifts to the right when hover on an option.

 

[Mike]

I'm not able to reproduce this, either with a "fake" RTL language or a full translation:



I tried in both Firefox and Chrome. Can you still reproduce this? Can you provide browser details?

 

[Fethi.dz]

Hi,

I did a test on Chrome and you are right, there is no issue with the hover bar.

On Firefox I have no idea what the problem whit it, I cleared the cache and the problem still exist, so I tried hard refresh Ctrl+F5 the problem gone but as soon as I refresh the page again the issue come back

 

[Fethi.dz]

I reinstalled Firefox and did test again, and here we go:

With XF2.0.11, the issue doesn't exist.
View attachment xf2.0.11.mp4

On XF2.1Beta2, the issue exist and the basket "Delete" doesn't follow the background color style when hover on it.
View attachment XF2.1Beta2.mp4

 

[turkyalawlqy]

Hello,

In RTL "AR" the hover background of the data list in the Admin Options shifts to the right when hover on an option.

View attachment 188714

+1

 

[bousaid]

I confirm that.

 

[Fethi.dz]

Maybe it's related to a zooming bug with Firefox.

View attachment FireFoxZooming.mp4

 

[Mike]

I have managed to reproduce this now, though this looks like a Firefox rendering bug as any trivial change to the CSS in the developer tools resolves the issue (as does changing the zoom).

I'm not sure we'll be able to workaround this. I'm also not that optimistic that we can create a reduced test case to report to Mozilla as it may involve a number of moving parts.

 

[Fethi.dz]

I found a solution for the hover background been shifted in RTL by adding:

white-space: nowrap;
word-wrap: normal;

Test it on Firefox and Chrome and works just as it should.

 

[Chris D]

The suggested change would potentially impact word wrapping, and only on hover which could cause some unexpected results.

I'm very confident this is a browser issue though after some testing. I have managed to create a reproduction case and have submitted a bug report:

1547759 - mis-positioned row background in a position: relative table cell with RTL direction

RESOLVED (dbaron) in Core - Layout: Tables. Last updated 2020-03-06.

bugzilla.mozilla.org

I would recommend tracking the issue there from here on.