[v7] Opacity + stroke renders differently when objectCaching is disabled (works correctly in v5)

[MassoudFSharifi]

CheckList

• I agree to follow this project's Code of Conduct
• I have read and followed the Contributing Guide
• I have read and followed the Issue Tracker Guide
• I have searched and referenced existing issues and discussions
• I am filing a BUG report.
• I have managed to reproduce the bug after upgrading to the latest version
• I have created an accurate and minimal reproduction

Version

7.1.0

In What environments are you experiencing the problem?

Chrome

Node Version (if applicable)

22.12.0

Link To Reproduction

https://codesandbox.io/p/devbox/y6ct9c

Steps To Reproduce

In Fabric v7, applying opacity < 1 to an object with both fill and stroke produces a visible inner stroke blending artifact when objectCaching is set to false.

When objectCaching is true (default), the rendering appears correct.

In Fabric v5, this issue does not occur — opacity behaves consistently and does not produce the inner stroke blending artifact.

This suggests a behavioral change or inconsistency in the v7 rendering pipeline.

opacity=1

<--->

opacity=0.7

Expected Behavior

• Opacity should affect both fill and stroke uniformly.
• Rendering should be visually consistent regardless of objectCaching value.
• Behavior should match Fabric v5, where no inner stroke blending artifact appears.

Question:

1. Is this difference in behavior between v5 and v7 intentional due to the new rendering/caching architecture, or is it considered a regression?
2. Should opacity compositing behave consistently regardless of objectCaching?

Actual Behavior

with objectCaching: false , When opacity < 1, the inner half of the stroke visibly blends with the fill, creating a darker inner edge.
With: objectCaching: true, Rendering appears visually correct.

Comparison with v5
Using the same configuration in Fabric v5:

• No inner stroke blending artifact occurs
• Opacity renders consistently
• paintFirst: 'stroke' prevents visible overlap artifacts

Error Message & Stack Trace

[asturur]

Is not possible to avoid the blending without an intermediate layer.
So i suspect v5 is forcing caching on in some way.
Are you able to show it on fabric 5? It is possible that you find the cache on the object if you inspec it.

[MassoudFSharifi]

Hi @asturur, this is Rect with Stroke and opacity in fabric 5.
You can check here: https://codesandbox.io/p/devbox/hvnd3c

[asturur]

it gets a cacheCanvas

Now i remember why it was a weird bug.

This function was forcing cache on:

    /**
     * When set to `true`, force the object to have its own cache, even if it is inside a group
     * it may be needed when your object behave in a particular way on the cache and always needs
     * its own isolated canvas to render correctly.
     * Created to be overridden
     * since 1.7.12
     * @returns Boolean
     */
    needsItsOwnCache: function() {
      if (this.paintFirst === 'stroke' &&
        this.hasFill() && this.hasStroke() && typeof this.shadow === 'object') {
        return true;
      }
      if (this.clipPath) {
        return true;
      }
      return false;
    },

And since the default value of shadow for fabricJS 5 was 'null' and null is typeof object... it was triggering.

Now if you really want cache on automatically i suggest you to just override needsItsOwnCache in v7 with the logic you prefer. in your case would be this.hasFill() && this.hasStroke() && this.opacity < 1 or just enable cache.

Is there a reason why you force caching to false? Mobile compatibility issues?

[MassoudFSharifi]

Hi @asturur

When I don’t set objectCaching: false, scaling the object causes the selection box to stay in its original position instead of updating correctly.

However, setting objectCaching: false fixes the problem.

[asturur]

This bug you are mentioning is super weird. is it possible to see a reproduction case?

[MassoudFSharifi]

Hi, @asturur
Check the Rect with not objectCaching
https://codesandbox.io/p/devbox/y6ct9c

[asturur]

Ok i see, that is the effect of noScaleCache in v5.
Caching is ON as we explained before, and you need to change noScaleCache value ( true or false ) in order to avoid that border to grow weirdly until you stop scaling and mouse up.

strokeUniform is also at fault for this.

[MassoudFSharifi]

Hi, @asturur ,
noScaleCache fixed the issue for Rect and Ellipse, but the problem still occurs with images.

https://codesandbox.io/p/devbox/y6ct9c?file=%2Fapp%2Fpage.tsx%3A74%2C27

[asturur]

Images should support the same cache features/bug of other objects. but images have cache disabled by default, because generally you do not need to cache an image, that is already a layer of pixels. I think for image you have to enable cache by adding objectCaching: true.

[MassoudFSharifi]

Hi @kangax @asturur, using objectCaching: true on the image doesn’t work either.
https://codesandbox.io/p/devbox/y6ct9c

[MassoudFSharifi]

Hi @kangax , using objectCaching: true on the image doesn’t work either.
https://codesandbox.io/p/devbox/y6ct9c

[asturur]

Well it should. This needs to be investigated to understand why image does not behave as rect.