PF4 BackgroundImage Error: <filter> attribute width: Unexpected end of attribute. Expected length, ""

[idevat]

When I tried to update @patternfly/react-core from 2.9.2 to current 3.16.10 the background image was shorten. I separated a reproducer:

import React from "react";
import { BackgroundImage, BackgroundImageSrc } from "@patternfly/react-core";
import b1200 from "@patternfly/patternfly/assets/images/pfbg_1200.jpg";
import b768 from "@patternfly/patternfly/assets/images/pfbg_768.jpg";
import b768x2x from "@patternfly/patternfly/assets/images/pfbg_768@2x.jpg";
import b576 from "@patternfly/patternfly/assets/images/pfbg_576.jpg";
import b576x2x from "@patternfly/patternfly/assets/images/pfbg_576@2x.jpg";
import filter from "@patternfly/patternfly/assets/images/background-filter.svg";

const BackgroundImageSources = {
  [BackgroundImageSrc.lg]: b1200,
  [BackgroundImageSrc.sm]: b768,
  [BackgroundImageSrc.sm2x]: b768x2x,
  [BackgroundImageSrc.xs]: b576,
  [BackgroundImageSrc.xs2x]: b576x2x,
  [BackgroundImageSrc.filter]: `${filter}#image_overlay`,
};

const Test = () => (
  <BackgroundImage src={BackgroundImageSources} />
);

export default Test;

With the previous version 2.9.2 the result page looks like this:

With the new version 3.16.10 the result page looks like this (notice the white stripe between the image and the chrome dev tools area):

Is something wrong with the code above?

[redallen]

We had a regression in our last promoted release (3.16.10) that caused this. Use a prerelease version (latest 3.32.5) where the issue has been resolved.

[idevat]

Unfortunately, there is another issue in the version 3.32.5. With the same reproducer I got: Error: <filter> attribute width: Unexpected end of attribute. Expected length, "".

[redallen]

What does your <BackgroundImage> look like?

[idevat]

@redallen I don't understand the question.

The code is the same as in the initial comment of this issue. So, with the same code I got three different results depending on version @patternfly/react-core (see images above).

As you can see in the code, I haven't used any own asset. The component in the code is used directly as page inside react-router, so no visual component is around.

The rendered html in the browser looks like this:

[redallen]

Ah, sorry for misunderstanding. Yes, this issue will be fixed by #2070 which defines a valid width="0" instead of width="" like we currently do.

[tlabaj]

@idevat is your issue . resolved with the latest version

[idevat]

@tlabaj yes, I've been using the version 3.38.0, where the issues has been fixed, until now and now I can see that the current version 3.58.1 works fine as well. Thanks.