model-viewer disappears with dir=rtl and a certain combination of CSS size definitions

[eyaler]

Here is a minimal code. Please note this is a simplified version of an actual use case.

model-viewer version 4.0.0. Tested on Firefox 132 and Chromium 132.

I have an HTML with dir=rtl

I have CSS as such for responsive model size:

model-viewer {
    aspect-ratio: 1;
    height: auto;
}

And I have two model-viewers.

All of this works fine. But if i add width: 100% to the second model-viewer the first one disappears. changing to dir=ltr or adding direction: ltr in CSS fixes this. This was super hard to pin down...

[elalish]

Thanks, that is quite odd. Ideally MV just behaves the way a regular <div> would. Can you repro this behavior with just a standard <div> or <img> tag? If you figure out what CSS we have that's messing this up, a PR would be most welcome.

[eyaler]

Thanks @elalish. This doesn't happen with div/img. you can see the loading and prompt are in the correct position but the model is shifted left out of the view. e.g with width: 70%:

Also, if you play width the width on both model-viewers you can get strange artifacts where one of the models gets a duplicated view in different sizes: It reminded me of this old issue: https://github.com/google/model-viewer/issues/1379

I think the issue is related to RTL support (also found: https://github.com/google/model-viewer/issues/2021). As mentioned, a quick fix is adding dir=ltr or direction: ltr to the model-viewer, but adding that blindly might break backward compatibility and it would be better to understand the source of the issue (which is currently out of scope for me unfortunately). Maybe for the time being add a known issue comment to the docs?

[elalish]

Thanks for the detail, that's helpful. I'll take a look.