Bug: Saving a webpage breaks CSS references in some cases
Status: RESOLVED
Priority: --
Resolution: INCOMPLETE
Created: 2021-08-23 01:11:53+00:00
Resolved: 2021-12-22 10:07:54+00:00

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36

Steps to reproduce:

(Observed in Windows 7 and Windows 8.1)

I have actually seen the effects of this bug for a long, long time (over many, many versions), but the stars aligned tonight [smile].  I managed to isolate it down to something very reproducible and straightforward to describe, with a corresponding example.

Go to the following URL:

https://circuitdigest.com/electronic-circuits/soft-start-circuit-for-power-supply

When it has finished rendering, click on File -> Save Page As, and save the page to a local folder.  I suggest using a very short folder name directly off the root of a data drive, for reasons that will soon become self-evident.

Now, in Firefox, try to open the page you just saved (preferably, while disconnected from the Internet, to ensure that the local elements are used - as opposed to possible 'live' streams from the Internet).  Notice how the local page does not render properly.

In the folder where you just saved, there should be a subfolder called "Soft Start Circuit for Power Supply_files".  Look inside that subfolder and locate the CSS files. 
 Pay close attention to the one named:

"css__O-vC7rzbt04ipYTvKKTNEuPbCrTFcthax3rk3FnlOyA__nXrGOicIDH.css"

In reality, it should actually have been named:

"css__O-vC7rzbt04ipYTvKKTNEuPbCrTFcthax3rk3FnlOyA__nXrGOicIDH8-_ixs9goY05AnIkWxm1ZsdsGZWn5Yfk0__Si4nJgwqcukDsAs0UYzgS7s-fYCWJKHDSMD2ZJhG910.css"

But Firefox erroneously truncated the name when it saved the page.  We can confirm that by examining the contents of the parent HTM file.  The corresponding HTM file references the long version - which, of course, is not found (given the truncation), so the rendering breaks.

I hate to use the "C" word [grin], but as a point of comparison, if I use Chrome to save the page, the filenames are not truncated - the long names are preserved.  This is a significant point, as it also exposes a secondary problem with Firefox.

It seems that Firefox's reading routines also choke on long filenames.  If I save the page with Chrome (thereby creating the proper file names), I can also open the page (offline) properly in Chrome.  But if I try to open that same structure (the one saved from Chrome, with the proper long filenames), Firefox still does not render the page properly.

To be thorough, I did all 4 combinations of tests, using Firefox and Chrome.  Here are the results:

Save in Chrome; Open in Chrome - works
Save in Firefox; Open in Chrome - fails
Save in Chrome; Open in Firefox - fails
Save in Firefox; Open in Firefox - fails



Actual results:

Firefox truncated the names of certain files (including the main CSS file), so subsequent offline rendering of the locally-stored webpage fails.  Some long JavaScript file names are also truncated.

Firefox also fails to read long filenames properly, resulting in failed offline rendering.  (Note that Chrome is able to render the very same offline structure properly, on the very same computer systems - confirming that other elements such as the underlying files, system config, etc., are not at fault.)


Expected results:

Firefox should employ more advanced file access calls to handle long filenames.