A Website running on Magnolia 4.4.9 works perfectly good in all Browsers except Chrome. In chrome, one page ends with a ton of cryptic characters. Page
When inspecting the code, I see that they're after the closing </html> statement, even in the original source code (right click -> show page source code). This problem persists on different OS' (Windows 7, Mac OS X, Ubuntu 13.04) and does not always create the same cryptic character sequence.
What could be a possible explanation for this behaviour? Could it be an encoding problem?
http://jira.magnolia-cms.com/browse/MAGNOLIA-3821
Upgrade to 4.4.10 or 4.5.7
HTH,
Jan
When comparing the source in Chrome and Safari on Mountain Lion, I noticed that p#copyright-magnolia has different content between browsers:
on Chrome, I see ... Intuitive CMS Software ...
On Safari, I see ... SEO-friendly CMS ...
Is there any configuration or code that could be causing different content to be sent out to different browsers?
Also, in Chrome, the Elements view of the Developer tools puts the garbage output right after the <!-- end wrapper --> comment and interprets the content, in part, as matched tags. Further, there is a div#a11y-hidden (and other content) right after the garbage and before the closing tags. However, I don't see div#a11y-hidden in the ordinary source view in Chrome or Safari.
Do you see the same thing?
These seem like clues to where the trouble is coming from.
Related
TL;DR
How/why are some browsers able to search and highlight text in the HTML body which is followed by #:~:text= in the URL?
Explanation
One day I was searching for something on Google, which lead me to Quora's result. I observed that 2 sentences were highlighted in yellow, which were part of URL after the aforementioned parameter. I thought this would be Quora's feature for SEO or something, however, also found this on Linkedin, and Medium, and so on.
I'd like to know:
What is this highlighting called? Why/how does it work?
This seems to be browser-specific. What kind of browsers support this?
It seems to work on Chrome and Edge; but not on Firefox, Safari, and IE.
Does a frontend programmer need to incorporate something in the code to have search engines highlight content on their web-pages? (Based on the assumption that search engines actually appends the relevant string predicted by user's query)
The highlighting is called Text Fragments. Its a new feature that was recently added to Chrome 80. It works by specifying a text snippet in the URL hash.
Yes it is browser specific.
No, the experience that you get when clicking on a link from Google's search results is part of Featured Snippets which are algorithmically determined. There is nothing you can incorporate into your code to prompt search engines to highlight text on your page.
There is no markup needed by webmasters. This happens automatically,
using Scroll To Text for HTML pages
https://chromestatus.com/feature/4733392803332096. See also more
background here: https://support.google.com/webmasters/answer/6229325
Sources:
https://web.dev/text-fragments/
https://www.theverge.com/2020/6/4/21280115/google-search-engine-yellow-highlight-featured-snippet-anchor-text
https://www.theverge.com/2020/6/18/21295300/google-link-to-text-fragment-chrome-extension-chromium-highlight-scroll-down
https://searchengineland.com/google-launches-featured-snippet-to-web-page-content-highlight-feature-335511
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html
While text fragments is natively implemented only in latest Google Chrome (and the latest versions of Chromium-based browsers, such as the new Microsoft Edge), there is a browser extension/add-on that seems to enable it on Firefox and Safari: https://github.com/GoogleChromeLabs/link-to-text-fragment
It appears to use #ref-for-fragment-directive:~:text= and additional arguments (instead of just simple #:~:text=).
Firefox: https://addons.mozilla.org/firefox/addon/link-to-text-fragment/
Safari: https://apps.apple.com/app/link-to-text-fragment/id1532224396
Curiously enough, the extension has also been made available for Chrome and Edge too (!).
.
UPDATE: I'm testing it on Firefox Developer Edition, and it doesn't work for me.
First off, I know this is an extremely narrow edge case, but in the interest of due diligence with a client, I have to ask. Consider everyone's favorite no-frills HTML tutorial site, W3Schools.com, specifically their demo page on HTML select boxes: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select2
Open that page up in Safari on OS X (may exist in Windows, but honestly, who uses Safari for Windows?) and zoom in four times. Open up the select box. See where the normal check mark has changed to two dots?
I'm perfectly content to call that a Safari bug and close it as cantfix. Googling "safari html select two dots" doesn't get me anywhere. Is this fixable?
So upon near completion of my website i tested it (as i do) in Chrome, FF, Opera and IE8. Ive not got around to Safari yet, but im guessing its mostly similar to how Chrome would display it.
A page that was working fine previously (about a week ago) has now, along with 2 other pages, stopped showing altogether in IE8. Cant seem to find any problem in the source. I have Firebug and no errors show up there either.
Ive also uploaded it to w3c.org's Validator and no major problems are found.. (majority are unescaped & in urls)
the doctype is XHTML 1.0 Transitional. Any one know of any reason IE8 sucks so bad and is halting my progress?
I forgot to mention my page loads content via AJAX calls. Could this maybe have something to do with it?
You could try to use a tool like Charles to record and peruse server interaction. Then at least you can see if the calls are returning expected headers.
This page is being rendered incorrectly by IE 9 (and probably older versions too). The right menu is floating to the bottom of the page. Firefox, Chrome and Safari are rendering it correctly. Other pages in the blog are also being rendered fine by all browsers. I already tried to fire IE 9 Developer Tools (F12) and reduce the width of some divs (such as #main and .columns-inner)... no lucky with this approach, even with extra space the right menu is still rendered at the bottom. So I figure that the problem is in the Blogger auto-generated tags / css for the page content (which I am able to modify). Any CSS gurus out there can point what is wrong?
Cheers,
You have this line in your <head>, which is causing IE9 to render the page in IE7 mode:
<META content=IE=EmulateIE7 http-equiv=X-UA-Compatible>
If you remove this, it renders fine in IE8 and IE9. It still renders poorly in IE7, though.
Edit:
In response to your comment, I am able to replicate the issue with the background no longer being opaque. After some investigation, there is a particular script file being loaded:
http://www.blogger.com/static/v1/jsbin/938506610-ieretrofit.js
If you remove the <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> on line 4 of the source, and you remove the ieretrofit.js file from line 1471 of the source, the page should render correctly in IE9.
Since the ieretrofit.js file appears to be generated by Google, you might want to ask them about it. If you would like to disable it JUST for IE9, and allow it to continue for IE8 and below, you should take a closer look at line 1471 of the source. Here is a snippet (it's quite long, this starts around character #2275):
'\74!--[if IE]\76\74script
The !--[if IE] there is part of an IE conditional comment. You can change that snippet like so, and it will still target IE8 and below, without affecting IE9:
'\74!--[if lte IE 8]\76\74script
Let me know if you have any further issues!
The page has 104 validation errors — I’d start by fixing those if I were you.
Almost certainly it is because the page is invalid. Also, I really would think about starting again with this page as it is overly complex markup.
Guys. Figured it out (with great help from andyb and Paul D.)
The validator pointed to some unpaired </div> tags that I removed. Now it is working flawless.
Am testing my webpage on firefox and everything is looking fine, but when i run my page on IE or chrome a section with
Clear ReCSS console DOM Object Close
What is it and how can i remove it?
This one had me going also for a while. If you are utilising the DOJO framework then you need to turn Debug=false as this is the firebug-lite console that is shipped with it! If not it is still the Firebug-lite console. Firebug-lite will not show on Firefox as it has the full Firebug hence why it shows up on other browers.
It's likely that you have malformed html that Firefox is handling differently than IE and Chrome. Make sure you have matching opening and closing tags throughout!
If you post the html in question, we might be able to help a bit more...