Issue with "Using CSS transforms": broken images

MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms

What information was incorrect, unhelpful, or incomplete?

The images are shown as broken (browser placeholder).

Specific section or headline?

Rotating + Skewing and Translating

What did you expect to see?

The transformed image.

Did you test this? If so, how?

Firefox for Android.

MDN Content page report details

• Folder: en-us/web/css/css_transforms/using_css_transforms
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/css_transforms/using_css_transforms/index.html
• Last commit: https://github.com/mdn/content/commit/58530445b704e463be001d48aa82549d39d69127
• Document last modified: 2021-04-23T06:56:05.000Z

[escattone]

@wbamberg FYI, @peterbe and I discussed this over video, and I think we’ve arrived at a better solution going forward. We need to think about it a bit more, but we’ll update this PR with the new approach when we get there.

[peterbe]

https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms/_samples_/screen_shot_2016-02-16_at_15.53.54.png doesn’t work but if you remove the /_samples_/ part it works: https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms/screen_shot_2016-02-16_at_15.53.54.png Hmm… The “mistake” is that the live samples are built by “copying” CSS/JS/HTML from one context, putting it into a sub-path, and assuming it will continue to work.

I’ll chat to @escattone about a solution.