Background missing on mobile ( DOM: Invalid image request)

  • Resolved fledo

    (@fledo)


    3 years, 2 months ago

    Hi,

    Thank you for an excellent plugin. We have a minor issue and I hope it’s not to complicated to solve.

    The background image does not show up on some mobile devices. I have been able to replicate this is Firefox dev mode with responsive “Galaxy s9”. The text is still visible.

    There’s no output from the buffer test plugin, but there are two errors in the console. Errors only occur when the background image is gone. No errors on e.g. desktop layout.

    Output below. The domain has been redacted. It’s the one provided in the post form.

    1:

    DOMException: Invalid image request. smartslider-frontend.min.js:1:68750
    onImageLoaded https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    onImageLoaded https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    preLoad https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    preloadOnce https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    preLoad https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    _preLoad https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    preLoad https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    preLoadAll https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    onStarterSlide https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    done https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    t https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    onSliderHasDimension https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    s https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    waitForDimension https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    c https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    f https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    f https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    m https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    (Async: promise callback)
    m https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    a https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    (Async: requestIdleCallback handler)
    f https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    d https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    t https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    t https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Slider/SliderType/Simple/Assets/dist/ss-simple.min.js?ver=2a442a15:1
    <anonymous> https://REDACTED.TLD/ line 1 > injectedScript:1
    m https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    (Async: promise callback)
    m https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    a https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    (Async: requestIdleCallback handler)
    f https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    r https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    <anonymous> https://REDACTED.TLD/ line 1 > injectedScript:1
    m https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    (Async: promise callback)
    m https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    a https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    (Async: requestIdleCallback handler)
    f https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    d https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    <anonymous> https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    <anonymous> https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    <anonymous> https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1

    2:

    DOMException: Invalid image request. smartslider-frontend.min.js:1:68750
    onImageLoaded https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    onImageLoaded https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    preLoad https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    preloadOnce https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    preLoad https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    _preLoad https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    preLoad https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    preLoadAll https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    onStarterSlide https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    done https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    t https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    onSliderHasDimension https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    s https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    waitForDimension https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    c https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    f https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    f https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    m https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    (Async: promise callback)
    m https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    a https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    (Async: requestIdleCallback handler)
    f https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    d https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    t https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js?ver=2a442a15:1
    t https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Slider/SliderType/Simple/Assets/dist/ss-simple.min.js?ver=2a442a15:1
    <anonymous> https://REDACTED.TLD/ line 1 > injectedScript:1
    m https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    (Async: promise callback)
    m https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    a https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    (Async: requestIdleCallback handler)
    f https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    r https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    <anonymous> https://REDACTED.TLD/ line 1 > injectedScript:1
    m https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    (Async: promise callback)
    m https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    a https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    (Async: requestIdleCallback handler)
    f https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    d https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    <anonymous> https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    <anonymous> https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    <anonymous> https://REDACTED.TLD/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js?ver=2a442a15:1
    • WP: 5.8.1
    • Theme: astra 3.7.2
    • No plugin collision in MEC help

    Edit: removed irrelevant css

    • This topic was modified 3 years, 2 months ago by Yui.
    • This topic was modified 3 years, 2 months ago by fledo.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Ramona

    (@nextend_ramona)

    Hi @fledo

    I’m sorry for the delayed reply!

    The problem seems to be connected to some kind of 3rd party lazy loading plugin, because the background image’s codes are modified on mobile. The src attribute was removed:
    https://www.w3schools.com/tags/tag_img.asp
    That’s why the “DOMException: Invalid image request” error appears.

    I can see a data-cfsrc attribute on the images, so I Googled it. It seems to be related to Cloudflare’s Mirage:
    https://blog.cloudflare.com/mirage2-solving-mobile-speed/
    So the problem might be caused by this Cloudflare service.

    The problem with these kind of 3rd party lazy loading solutions, that they generally can’t detect when they need to display the images in the slider, so they just mess up the slider. Usually lazy loading plugins have an exclude option, where you can set a CSS class and they won’t touch the images which have that class. Try adding the skip-lazy class there.

    If the issue isn’t connected to Cloudflare, and you’re not sure which plugin is doing this lazy loading run a plugin and theme conflict test:
    https://smartslider.helpscoutdocs.com/article/1735-how-to-do-a-plugin-theme-conflict-test

    Thread Starter fledo

    (@fledo)

    Hi,

    No need to apologize! I’m just glad there’s somewhere I can ask questions when I’m out of my depth.

    You are 100% correct, the problem was Cloudflare’s Mirage. Described as follows: “Improve load time for pages that include images on mobile devices with slow network connections.”

    I disabled it and the slider now works as expected. Thank you not only for solving my problem, but also explaining how you solved it.

    For anyone else using Cloudflare + Smart Slider 3. Our site works as expected now. We do not have a lazy loading plugin. We have the following options enabled in CF Speed Optimization:

    – Polish, Lossless Webp
    – Auto Minify JS, CSS, HTML
    – Brotli
    – APO for WordPress ??
    – Enhanced HTTP/2 Prioritization
    – TCP Turbo
    – Rocket Loader

    I also just now found the Cloudflare support article Troubleshooting missing images…

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Background missing on mobile ( DOM: Invalid image request)’ is closed to new replies.