@mantine/core - Image - Long alt text appears behind placeholder

[kyle-b2]

What package has an issue

@mantine/core

Describe the bug

(On Firefox) If an Image has alt text that is larger than the placeholder, it will "break out" from behind the placeholder image.

NOTE: This only seems to happen in the Firefox browser and not in the Chrome browser. Some sort of different handling with the img tag alt text?

What version of @mantine/hooks page do you have in package.json?

6.0.1

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/kind-sanderson-jykbdz

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

One solution is to use the logic that Mantine uses to determine whether to show or hide the placeholder to remove the <img> tag from the DOM. But not sure if this is the desired solution since this issue only seems to affect Firefox

[moussa32]

Which firefox version are you using?

[rtivital]

I can see the alt text overflowing on the latest version on ff on macos

[moussa32]

Yeah i saw that i will fix it and submit pull request @rtivital

[moussa32]

The problem is that image has ::before that render the alt and this ::before has display:inline we can simply apply the same styling that applys on Image-placeholder div and adding overflow: hidden I will submit pull request with the solution

[dimbslmh]

NOTE: This only seems to happen in the Firefox browser and not in the Chrome browser. Some sort of different handling with the img tag alt text?

Yeah, it's clearly different handling.

In Chrome an <img> doesn't render with a ::before, while in Firefox it does.
In Chrome a "broken" <img> shows a broken image icon, while in Firefox it does not.
In Chrome an <img> alt text gets truncated by given height, while in Firefox it does not.

If you must have the same appearance as in Chrome, you can just add the following to the MantineProvider:

      theme={{
        components: {
          Image: {
            styles: {
              image: {
                "&::before": {
                  display: "block",
                  height: "inherit",
                  width: "inherit",
                  borderRadius: "inherit",
                  overflow: "hidden"
                }
              }
            }
          }
        }
      }}

[4m1n83]

One solution could be to make alt text transparent: img { color: transparent } since no alt text is displayed on other browsers (Chrome, Safari, Edge)