Contrib.social

Blur not working for Anonymous Users

Open on Drupal.org →
Created on 19 August 2024, 3 months ago

Problem/Motivation

The blur effect on background images is only working for users who are logged in.

Anonymous users only see the background image, but there is no blur effect, and the console shows the below error: 

Uncaught TypeError: Cannot read properties of undefined (reading 'extend')
    at RuntimeCss.add (runtime.css.js?v=1.0.0:34:24)
    at updateOffset (scrolling.blur.js?v=1.0.0:50:15)
    at Object.attach (scrolling.blur.js?v=1.0.0:53:7)
    at drupal.js?v=10.3.2:166:24
    at Array.forEach (<anonymous>)
    at Drupal.attachBehaviors (drupal.js?v=10.3.2:162:34)
    at drupal.init.js?v=10.3.2:32:12
    at HTMLDocument.listener (drupal.init.js?v=10.3.2:20:7)

When you login, this error disappears and the blur effect works without issues.

Steps to reproduce

1. Install background images module
2. Create a background image for a page
3. Go to Configuration -> Media -> Background images, then click the Blur tab and select either Type: Scrolling, or Type: Scrolling (Fiew Viewport), then click save
4. In Permissions, checkmark Anonymous User for "View background images"
5. Navigate to the page as an anonymous user

Troubleshooting

I attempted the below solutions based off of various similar issues.

1. Flushed caches after changes
2. Cleared browser cache & attempted using another browser in Incognito
3. Attempted to disable CSS and JS aggregation in the Performance config
4. Disabled cache temporarily

Conclusion

I have not been able to conclusively determine the cause of this issue. I am not sure if this is due to a configuration issue on my end or something else.

🐛 Bug report
Status

Active

Version

2.0

Component

Code

Created by

🇨🇦Canada ciesinsg

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @ciesinsg
  • Comment 3 months ago →
    🇨🇦Canada ciesinsg

    After further investigation, I noticed that the underscore-min.js file that is listed as a dependency for Backround Image does not load for anonymous users (only loads for authenticated users).

    In the core.libraries.yml file, it states that this is an internal library and should not be used outside of core or to add new core usage as it is expected to be removed when the listed issues are fixed:

    internal.underscore:
  # Internal library. Do not depend on it outside core nor add new core usage.
  # The library will be removed as soon as the following issues are fixed:
  #  - https://www.drupal.org/project/drupal/issues/3270395
  #  - https://www.drupal.org/project/drupal/issues/3203920
  #  - https://www.drupal.org/project/drupal/issues/3204011
  #  - https://www.drupal.org/project/drupal/issues/3204015
  remote: https://github.com/jashkenas/underscore
  version: "1.13.6"
  license:
    name: MIT
    url: https://raw.githubusercontent.com/jashkenas/underscore/1.13.6/LICENSE
    gpl-compatible: true
  js:
    assets/vendor/underscore/underscore-min.js: { weight: -20, minified: true }

    This concerns me as the whole module may break in the future if underscore is removed from core.

    I am still looking into how to get this dependency to load properly for Anonymous users, but any assistance or advice would be greatly appreciated.

  • Comment 3 months ago →
    🇨🇦Canada ciesinsg
  • Comment 3 months ago →
    🇨🇦Canada ciesinsg

    As this bug affects Anonymous users accessing the site and is caused by a depracated/removed dependency issue, I changed the priority to major as per the Issue Priority → documentation.

  • Comment 3 months ago →
    🇮🇹Italy apaderno Brescia, 🇮🇹
  • Comment 24 days ago →
    🇧🇪Belgium jbfelix

    As workaround i added this in the head section of html.html.twig template in my subtheme:

    {% if logged_in %}
    {% else %}
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.7/underscore-min.js"></script>
    {% endif %}

    Maybe not clean but it's working...

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024