Mamp Pro renders without styles in Firefox but correctly in other browsers - apache

for years I've used Mamp (free), but now I pretend to buy pro version, so I've recently installed demo of Mamp Pro and made a few sites work, however, there is one Drupal 9 site that works fine in most browsers, except in Firefox. It renders a non-styled page. It was fine when I used Mamp (free).
What I have tried is to inspect page source of Firefox and compared it to the page source of Chrome, the result of this was that the HTML code is the same in both, and that there are not bad closed HTML tags.
Any idea of what is happening?
Mamp Pro 6.6.4.
Drupal 9.4.9
Firefox 108.0.1 (64-bit)
PHP max_execution_time = 30
PHP memory_limit = -1
PHP max_input_time = -1
Mamp settings
Apache
Firefox screenshot

I don't believe this is related to your MAMP version but to the site not being able to load all CSS/JS files
If you inspect the the page, and go to the 'network' tab, you will see if the CSS & JS files were loaded or not found.
If the case is that there were not found, try this:
a) access the Drupal's "Performance" page:
/admin/config/development/performance
b) Under 'Bandwidth Optimization' deselect:
aggregate CSS files
aggregate JS files
'Save Configuration'
c) clear cache
You may then select to aggregate the files back
===

Related

An object within an iframe has a src that is an svg file, type image/svg+xml. It renders as text on remote server, but as image on local server. Why?

I have a web page that contains an iframe, and within the iframe is an object with a src= attribute of an svg file that displays properly when I serve the page from localhost (running apache 2.4 on Windows 10). But when I serve the same page from an Amazon Linux instance, also running apache 2.4, the svg file for the object is rendered as text. I'm quite sure the pages are the same, because the content of the htdocs tree is managed by git, and I make changes on the Windows 10 PC and commit them, then push and pull them onto the Amazon Linux machine.
I've attached two screenshots of what I see in Chrome Developer Tools for the same page on the two systems. As you can see, on the PC, the <object> expands into a #document followed by an <svg>. But on Linux, the <object> expands into a #document followed by <html>, with the source code of the svg file wrapped in a <pre> tag within the <body>. How is this even possible?? I'm using the same Chrome bowser instance, the only difference is which server is serving the page.
I offered Danny '365CSI' Engelman the opportunity to post his comment as an answer, but he didn't take it, so I'll post the answer myself. My problem was that the Apache server I was using had a rather old mime.types file in the etc directory of its configuration (I was using xampp, which has its own etc directory packaged with it). That old version of mime.types did not have an entry for .svg files. Replacing it with a newer version from svn.apache.org, and restarting the server, solved the problem.
I found this quite surprising, since my <object> element had an attribute of type=image/svg+xml, which is the same as the type given in the updated mime.types file. Surprising because the file command on the server recognized the file as having that mime type. And so the lack of an entry for .svg in the mime.types file actually caused apache to ignore the type attribute on the object element, and render the content of the object as text!

Firefox not displaying PDF in primefaces p:media component on a remote server

I have a JSF application that uses Primefaces 7.0. Some of its pages use the p:media component to display the content of PDF files. When installed on a remote linux server, the application does not show the content of the PDF if used with Firefox 67.0. It works fine with Chrome and IE. And it works perfectly on my Windows 10 PC, even with Firefox. To make it even wierder, inspecting the element makes it visible in my laptop, but not in my desktop computer. Has anyone else a similar problem? Please advice.
EDIT 11/11/2019: Today I learned that the problem occurs when using https instead of http. Therefore, it doesn't really matter that the server is remote; what happens is that on our remote (and public) server we use https

website in SSL mode not working in firefox

After https migration of my website, the website works well on chrome, internet explorer and safari but not the case for firefox.
The Html pages do not download all resources (css, js and images ...) I have 501 response
See firefox developper tools screenshot here
I have also in the apache log file an errors like:
[error] [client 88.219.231.11] Invalid method in request \x9dGET /medias/new-search.png HTTP/1.1, referer: https://www.
any idea please ?
I do not see where the HEX character \x9d comes from before the GET method?
And why I have this problem only with firefox?
NB: When I ask the html page several times the number of 501 error message in the development panel decreases
I find the issue and i fixed it.
It come from wamp resources.(openSSL)
to fix it:
- I download the openSSL v1.1.0 from this link
- Install it
- In the installed directory, copy the files (bin\openssl.cfg, bin\libeay32.dll bin\ssleay32.dll) and paste it into bin/apacheVersion/bin/ (to remplace the old files)
- rename the copied file openssl.cfg to openssl.cnf
- Restart wamp

How to preview a static site?

With Ruby on Rails I can run rails s -p 3000 and preview my site at localhost:3000.
With React I can run npm start and view the site at localhost:8080.
What if I just have html and CSS files, how do I preview that?
On OSX, you can run a simple web server from any directory using this command:
python -m SimpleHTTPServer 8000
Then, you can hit the directory in your browser by going to http://localhost:8000/path/to/file.html
You can try click 2 times in index.html to open the file in browser.
Every time you update the code in sublime text, you need to reload the browser and the updates will be aplied.
This usually depends on your device/OS and what your eventual goals are, but usually you can either use (online) software that renders the HTML and the CSS for you (such as Brackets.io, etc.) whilst you are typing it (to live preview any modifications/additions), or you can put the documents live using a local webserver such as Xampp or OSXs built in simple web server, and check their respective localhost locations every time you save changes using your code editor.
You could also simply use online applications like Codepen, which can also render HTML and CSS, and even JavaScript. Codepen just today launched Codepen Projects which allows you to create entire website projects at their website. It is however, a pro (paid) feature.
Here's a short overview of code playgrounds that offer the functionality you requested (by no means an exhaustive list):
JSFiddle
CSSDeck
CodePen
JSBin
And ofcourse you can insert Snippets here on StackOverflow, which is also able to render HTML and CSS (and JS).
If you really only use HTML and CSS, previewing in a browser is also possible, opening the .html file by double clicking and opening in Internet Explorer, Chrome, etc.

Firefox doesn't understand svg on remote server

I've got a curious problem where FireFox (and IE9, I think) can display a local html file which embeds an svg, but it can't display exactly the same file when it's on a remote server. Any ideas much appreciated.
The setup is that I have a test directory which contains index.html, an svg file, and a js file. When I point any browser at index.html it correctly displays the embedded svg. However, when when I upload this test directory to a remote server, then:
1 - Opera, Safari, and Chrome correctly display the svg
2 - FireFox complains that it needs a plugin for the svg
3 - IE9 displays nothing.
Something is different about the remote setup, but I have no idea what. My suspicion is that this is an interaction of some sort with Apache (when I view index.html locally I'm not using Apache, of course - the browser is directly viewing the file).
Any ideas? Thanks.
Make sure the remote server sends the appropriate MIME type "image/svg+xml".
I run to this issue aswell on my remote server.
Adding this to .htaccess file solved my problem.
AddType image/svg+xml svg
AddType image/svg+xml svgz
For more information see SVG MIME TYPE