Slideshow page renders correctly with Pale Moon, but not with other browsers.

General project discussion.
Use this as a last resort if your topic does not fit in any of the other boards but it still on-topic.
Forum rules
This General Discussion board is meant for topics that are still relevant to Pale Moon, web browsers, browser tech, UXP applications, and related, but don't have a more fitting board available.

Please stick to the relevance of this forum here, which focuses on everything around the Pale Moon project and its user community. "Random" subjects don't belong here, and should be posted in the Off-Topic board.
User avatar
Daniel Baran
Newbie
Newbie
Posts: 5
Joined: 2021-07-17, 03:34
Location: Oregon USA
Contact:

Slideshow page renders correctly with Pale Moon, but not with other browsers.

Unread post by Daniel Baran » 2021-07-17, 03:42

I have website for distributing a utility program I created.
Recently, I made an instructional slide show related to it.
On publishing the slide show, I'm finding that the slides don't display in
the correct order ... except in Pale Moon where they render perfectly.
All the "mainstream" browsers display the last slide first on page load.
Pale Moon displays them in exactly the correct order when loading the same URL.

Just wondering if anyone has any ideas as to why this might be.

The page is created and published using WYSIWYG Webbuilder 16.4.1.
A URL demonstrating the issue is at: https://timespreader.com/TempDemo.html

Thanks for any ideas,
DB

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 30582
Joined: 2011-08-28, 17:27
Location: Tranås, SE
Contact:

Re: A page renders correctly with Pale Moon, but not with other browsers.

Unread post by Moonchild » 2021-07-17, 11:33

I looked at the HTML and it looks fine and should display the first slide, unless the JS involved is in error, which seems to be the case here.

Even though the slides other than 1 have style "display:none" set, the moment the page loads that style gets overwritten by the following on all elements:

Code: Select all

element {
    z-index: 0;
    position: absolute;
    top: 0px;
    left: 0px;
}
See Developer Tools/Inspector where you can clearly see this happening, and compare to page source (Ctrl+U).

The end result (also on Pale Moon!) is that all images get overlaid one on top of the other and the last-defined in the HTML will be the visible one "on top" even though they strictly speaking would all occupy the same position exactly.
I'm not sure why your result would be different unless something prevents the JS from executing properly; perhaps you are using an add-on that interferes?
"Son, in life you do not fight battles because you expect to win, you fight them merely because they need to be fought." -- Snagglepuss
Image

User avatar
Daniel Baran
Newbie
Newbie
Posts: 5
Joined: 2021-07-17, 03:34
Location: Oregon USA
Contact:

Re: A page renders correctly with Pale Moon, but not with other browsers.

Unread post by Daniel Baran » 2021-07-18, 02:55

Thanks Moonchild,
Your detailed analysis helped keep me on the right path.
I have a carefully crafted, and rather aggressive "Content Security Policy" on my servers (via htaccess).
It has garnered A+ ratings on the sites that test security headers.
While well intended (i.e. protecting users of the site), it only allows JS from declared sources.
I disabled that temporarily on the test server and ... bingo the slides loaded properly on all browsers.
So you were correct about it being a Javascript problem.
My task now is to sort out what "trusted" URLs to add to my Content Security Policy; shouldn't be too hard.
Thanks again,
Daniel

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 30582
Joined: 2011-08-28, 17:27
Location: Tranås, SE
Contact:

Re: A page renders correctly with Pale Moon, but not with other browsers.

Unread post by Moonchild » 2021-07-18, 11:28

Maybe you misunderstood what I was saying...
Blocking JS would display slide 1 (but also prevent the slides from working). CSP being too aggressive would result in that which doesn't seem to be the case.
The JS itself is the problem and it will display slide 9 because all "display:none" (on slides 2-9) is dropped from the style when the page loads, all replaced with the style I indicated.
The js for paging (when clicking the arrows) seems to be correct in what it does (setting z-order and display so the active slide is top-most and visible), just not the initial load. I can't look into it further since you've minified it which obfuscated the code.

Of note: your results may be intermittent depending on a few factors since having images occupy the exact same z-order and all being visible might render differently from load to load and engine to engine. The behaviour in that case is undefined, I think. It seems Pale Moon defaults to the last-declared image in the document structure (which would be logical to do) but it's also possible that it simply happens that way because of timings when loading image data and be coincidence.
"Son, in life you do not fight battles because you expect to win, you fight them merely because they need to be fought." -- Snagglepuss
Image

User avatar
Lunokhod
Lunatic
Lunatic
Posts: 441
Joined: 2017-04-20, 21:25
Contact:

Re: A page renders correctly with Pale Moon, but not with other browsers.

Unread post by Lunokhod » 2021-07-19, 19:04

Trying it in Pale Moon I got slide 9 first. Then pressing the right hand arrow repeatedly it went to 2 3 4 5 6 7 8 9 then finally I got 1.
Wait, it's all Ohio? Always has been...

User avatar
Daniel Baran
Newbie
Newbie
Posts: 5
Joined: 2021-07-17, 03:34
Location: Oregon USA
Contact:

Re: Slideshow page renders correctly with Pale Moon, but not with other browsers.

Unread post by Daniel Baran » 2021-07-20, 03:17

Thanks, Lunokhod
I have seen that exact behavior in every browser except Pale Moon!
It seems to reinforce what Moonchild said in the previous post "results may be intermittent" etc.

Since I have a very limited experience debugging JS, I decided to try a different approach.
I changed the "sequence" object subtype in my web-builder program for a "carousel" subtype.
It provides nearly the same result I started out wanting, but without the previous sequencing problem.
It seems there is no need to change my otherwise effective CSP; which is good news.
For anyone interested in comparison, the newer slideshow (carousel version) can be viewed at:
https://timespreader.com/overview.html
Thanks for your interest and help on this,
DB

PS: Since there seems to be a bit of traffic on the "TempDemo" (misbehaving URL), I will leave it up until interest drops off.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 30582
Joined: 2011-08-28, 17:27
Location: Tranås, SE
Contact:

Re: Slideshow page renders correctly with Pale Moon, but not with other browsers.

Unread post by Moonchild » 2021-07-20, 07:47

I can confirm that the "carrousel" version works as intended.
The issue is that this builder tool you've used simply generates wrong code for your other type. It should be reported to the people who created that tool.

P.S.: the traffic you're seeing on tempdemo is most likely from bots that index the forum for e.g. search engines and spider out from it. You could just remove it.
"Son, in life you do not fight battles because you expect to win, you fight them merely because they need to be fought." -- Snagglepuss
Image

User avatar
Lunokhod
Lunatic
Lunatic
Posts: 441
Joined: 2017-04-20, 21:25
Contact:

Re: Slideshow page renders correctly with Pale Moon, but not with other browsers.

Unread post by Lunokhod » 2021-07-20, 10:58

The new version seems to work as it should do now, for me as well. :thumbup:
Wait, it's all Ohio? Always has been...

User avatar
Daniel Baran
Newbie
Newbie
Posts: 5
Joined: 2021-07-17, 03:34
Location: Oregon USA
Contact:

Re: Slideshow page renders correctly with Pale Moon, but not with other browsers.

Unread post by Daniel Baran » 2021-07-20, 23:27

Thanks for this valuable feedback.
After the strangeness and unpredictability of the prior one,
it's meaningful to get these independent confirmations.
Regards,
DB

User avatar
Daniel Baran
Newbie
Newbie
Posts: 5
Joined: 2021-07-17, 03:34
Location: Oregon USA
Contact:

Re: Slideshow page renders correctly with Pale Moon, but not with other browsers.

Unread post by Daniel Baran » 2021-08-01, 17:00

Just wanted to mention that I have removed the "tempdemo" (malfunctioning) page per Moonchild's suggestion.
That link will now redirect to the site landing page instead.
DB

Post Reply