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?
Related
We have a catalog on our college website.
It may be found here:
https://www.southark.edu/admissions/resources/course-catalog
The links going down the left side of the page point to specific pages within the catalog.
For example:
https://www.southark.edu/images/catalogs/2021-2022/2021-2022_SouthArk_Catalog_FINAL.pdf#page=100
But when clicked, Chrome truncates the last portion of the url (in this case, #page=100), and it displays the first page of the catalog, not the intended page.
This happens in Chrome, but not Firefox.
It has worked in Chrome for years, but now it does not.
Any idea why Chrome is doing this and what kind of workaround I might be able to do?
P.S. I just tested it in Safari on my iPhone and it is doing it on there as well.
Thanks,
Charley
I discovered that it is due to the Chrome PDF extension. If I turn it off, it operates as it should.
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.
I'm working on a website that has a handful of radio buttons. In most browsers everything looks fine, but in IE11 some of the radio buttons look like googly eyes. Now, is this a bug in IE11 or am I doing something wrong?
Edit: screen shot of the real website:
Here's an example (try it in IE11 to see the effect): http://jsfiddle.net/TjZA5/
Here's a zoomed screen shot from my browser (IE11 on Windows 7):
You can clearly see the different spacing between the centre discs and the outer circles. The HTML is identical and valid (lots of <input type="radio" checked="checked"> elements) and so is the CSS (just a little margin to make the effect more obvious). I'm wondering if it's a rounding error in the IE rendering code?
Update: I submitted this issue as a feedback item to Microsoft Connect (http://connect.microsoft.com/IE/feedback/details/814911/radio-buttons-look-like-googly-eyes-in-ie11) and got a response saying that it's an optical illusion. I don't think it is, so I provided some more examples. I'm more convinced now that it's a bug in IE, but I'll have to wait and see.
Update re Edge browser in Windows 10:
I noticed that this issue persists in Microsoft's latest browser, Edge (which comes with Windows 10):
The Microsoft Connect issues hasn't been updated, so I guess we're stuck with googly eyed radio buttons for now.
Update: Microsoft Connect Issue closed as "Won't Fix"
I've created a new issue on developer.microsoft.com: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7114234/ in the hope that they'll fix it one day.
Update: Microsoft have updated the issue saying it's fixed!
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8516392/
I haven't had a chance to test this on a new build of Windows 10 yet, but will do asap.
The response you got on Microsoft Connect was not from Microsoft. This is a known issue that we are tracking. I think it is related to our sub-pixel positioning logic but it is definitely something we're tracking. You should see this updating in Connect soon.
#TheGermanOne - I agree this is a bug. I get the same as show below for IE 11 and Chrome. IE zoomed doesn't look too bad but 100% is crappy :(
Taken from your jsfiddle.
Chrome:
IE:
I've been working on a revamp of the charity site I'm the webmaster for, heroinitiative.org. It is located here:
http://www.heroinitiative.org/revamp/default.html
(and no it's not live code, it sits alongside the live site just so I can show progress to my boss, it's not really important to keep it under wraps, which is why I can post it here)
My problem: For some reason all links in the footer (from id "bodyfooter" on down, including anything I put below the "Partners/Thanks" footer) have been disabled. I don't know why this is happening as I've thoroughly reviewed the code.
It happens in:
Firefox 3.6.8
Chrome 5.0.375.127 & 6.0.472.53 (just upgraded as I typed this)
but not in:
IE 8.0.7600.16385 (or in it's compatibility mode)
you have a z-index:-1 on #bodyfooter. main.css line 182
remove this or change it to 0.
Your page takes a long time to display in Safari on my Mac.
Whenever I have a page that does not render as I expect, I run it through the W3C Markup Validation Service.
Try fixing the errors displayed here:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.heroinitiative.org%2Frevamp%2Fdefault.html&charset=%28detect+automatically%29&doctype=Inline&group=0
I have a big problem with my web site (you can see here), several user can't see images with firefox. I use too firefox but I don't have this problem.
These users use firefox 3.5.2 with windows XP or VISTA. I have no idea to find the problem.
Have you any idea ?
Thanks a lot.
Perhaps the user has accidentally blocked images from your domain.
In Firefox:
Tools > Options > Content tab > Load images automatically should be checked > click Exceptions... make sure the Site list does not include mowen-world.com. If it is there, highlight it and click Remove Site.
I've had similar issues a few weeks ago. The reason was that the JPG images were somehow corrupted. Some browsers/OS combinations showed them without problems, but on others they didn't show.
I fixed it by opening every JPG image and saving them again in a good image editor (like Photoshop or Fireworks)
Whenever I get a problem like this, I start from basics... like "is the HTML valid".
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fmorwen-world.com%2F
There are some issues listed here that could cause odd behaviour.
When I look at the site, I can see all the images fine and the website looks reasonably well laid out (Firefox 3.0.14 Windows XP AND Internet Explorer 8 Windows XP).
I can't see an issue using Firefox 3.5.3 on Windows Vista, just FYI.
Personally whenever I have issues with assets not loading or markup/CSS behaving weirdly, my first stop is Firebug. The Net panel shows the requests for any images and their respective responses. Certainly a good place to start looking.