Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

404 error in console on Safari when LazyLoad for CSS BG Images is active #6453

Closed
webtrainingwheels opened this issue Feb 22, 2024 · 14 comments · Fixed by #6941
Closed

404 error in console on Safari when LazyLoad for CSS BG Images is active #6453

webtrainingwheels opened this issue Feb 22, 2024 · 14 comments · Fixed by #6941
Assignees
Labels
module: lazyload background css images needs: grooming priority: medium Issues which are important, but no one will go out of business. quick win type: enhancement Improvements that slightly enhance existing functionality and are fast to implement
Milestone

Comments

@webtrainingwheels
Copy link

Describe the bug
When LazyLoad for CSS Background Images is active, Safari shows a 404 error in the console for:
lazyload-css.min.js.map

It doesn't seem to break anything, but we shouldn't cause a console error.

To Reproduce
Steps to reproduce the behavior:

  1. Enable LazyLoad for CSS Background Images
  2. Visit a page in Safari
  3. Check the console.
    Tested on WPR 3.15.9

Expected behavior
No 404.

Screenshots
If applicable, add screenshots to help explain your problem.

Acceptance Criteria (for WP Media team use only)
Clear instructions for developers, to be added before the grooming

@piotrbak piotrbak added type: enhancement Improvements that slightly enhance existing functionality and are fast to implement priority: medium Issues which are important, but no one will go out of business. module: lazyload background css images needs: grooming labels Mar 1, 2024
@remyperona
Copy link
Contributor

I can't replicate this on Safari, I dont'have the error on console with lazyload CSS enabled

@girlie
Copy link
Contributor

girlie commented Mar 19, 2024

@Khadreal
Copy link
Contributor

If you check on firefox it shows the 404 error for lazyload-css.min.js.map

@sandyfigueroa
Copy link
Contributor

I have a similar case.

Found this: https://goonlinetools.com/snapshot/code/#5hmlsyg75yfn5wz8d5l0y

//# sourceMappingURL=lazyload-css.min.js.map

But lazyload-css.min.js.map doesn't exist.

This is the ticket: https://secure.helpscout.net/conversation/2586260422/489478

@Khadreal
Copy link
Contributor

We aren't generating the map file when gulp run, coincidentally this PR(#6625) fix the issue.

@Miraeld
Copy link
Contributor

Miraeld commented Jun 2, 2024

@MathieuLamiot , if #6625 is fixing it, should we close this issue ?

@MathieuLamiot
Copy link
Contributor

Yes, after confirming it's fixed.

@remyperona
Copy link
Contributor

remyperona commented Jun 3, 2024

The file exists and is correctly mapped in the min file, we do have a stray lazyload-css.js.min.map that should not exist though.

@remyperona
Copy link
Contributor

Closing the issue as the files have been updated to correctly match. Please re-open if the issue arise again.

@DahmaniAdame
Copy link
Contributor

DahmaniAdame commented Jul 12, 2024

@piotrbak The issue here is that we are injecting the script on pages, which result on the sourcemap becoming relative path //# sourceMappingURL=lazyload-css.min.js.map .

Consequently, whatever is looking for sourcemap will look for it on the same current page's path.

Either remove the sourcemap or reference an absolute path for the sourcemap or include it as a file and not inline it.

@camilamadronero
Copy link

@piotrbak piotrbak added this to the 3.17.1 milestone Aug 26, 2024
@piotrbak piotrbak added the noQA label Aug 26, 2024
@rosamillan
Copy link

@MathieuLamiot
Copy link
Contributor

Moving it to the current sprint as there is a PR ready.

@serdarozbilen
Copy link

Same here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
module: lazyload background css images needs: grooming priority: medium Issues which are important, but no one will go out of business. quick win type: enhancement Improvements that slightly enhance existing functionality and are fast to implement
Projects
None yet
Development

Successfully merging a pull request may close this issue.