I created a new pinned-tab icon for Safari 9 on El Capitan as documented by Apple here but I can't seem to get Safari to actually show it when I pin my tab.
Here's the line in my header:
<link rel="mask-icon" href="https://towatchlist.com/img/twl.svg" color="red">
Safari does show the image just fine when I follow the link to the SVG file, but the pinned tab icon still shows the auto-generated letter image even after reloads and pin/unpin etc.
I tried opening up GitHub's SVG (which is working) and copying the general markup there but that didn't fix things either. I also poked through the Safari console briefly but didn't see it even attempting to land the SVG file.
Any suggestions on how to even debug this or ideas on what is going wrong?
Looks like Safari is aggressively caching (even the absence of) these icons. Found the answer over on Super User:
Delete the contents of the following folder:
~/Library/Safari/Template Icons
And then restart Safari.
Related
I've tried searching for this, and the closest related question that I could find was from 3+ years ago and had to do with the incognito window being dark, while a normal chrome window was light back then.
Now that we have the ability to have a light or dark mode browser, it's hard to find an icon design and color that looks good for both light and dark modes. Here's an example:
In the image above you can see that the first and third icons are black, so they are hard to see when using dark-mode. The middle icon (the one I'm using for my extension)looks great on dark mode, but terrible on light mode. See below:
So does anyone know if there is there a way to detect the browser mode (light or dark) and swap out the icon?
Thanks to wOxxOm I was able to figure this out.
First, I needed to create a content script (which I called toggleIcon.js) and add it to the manifist.json file.
Then I added the following to toggleIcon.js - which sends scheme: "dark" to my background.js file if window.matchMedia matches prefers-color-scheme: dark.
Then in my background.js file I listen for that message, and if request.scheme == "dark" I use chrome.broserAction.setIcon to change the paths for each of my icons to the dark version.
This effectively overrides my original icon paths as declared in the manifest.json file (as shown below).
The only downside I see is that this requires a content_script, which if you want your extension to work on any page, requires you to also add "matches": ["<all_urls>"] to your extension, which slows down the approval process. Which is why in my comments above I mentioned I had been avoiding using a content_script.
Also, I think it makes sense to use the version of your icons that work best on light-mode as your default, because I think the chrome extension page will pull from these for some of the icons they use (and that page has a white background). As an example, here's how my old icon looked (not enough contrast).
Hopefully this helps someone else!!
Why are the menu items of my site in Internet Explorer 11 so high?
I've built a Joomla 3.4.x site with Bootstrap 3.4.x.
Here's the URL: https://www.chjc.nl
There seems to be something wrong with the menu in Internet Explorer (11). In Firefox Opera and Chrome all seems OK (I haven't got MS Edge), the height is what it should be, in IE the menu items are a lot higher.
Secondly: I see list-style circles in front of the menu items in IE.
Can anyone explain what is wrong?
Also: when I change some CSS in the Inspector in IE, something may change and when I then change the CSS file, IE doesn't do what it was doing when I changed the CSS in the Inspector... This may be a totally unrelated bug.
Thanx
Thom
Thomsterdam Web Design
If you change something in your Inspector in IE, it is not changing the file on your webserver. You should open the CSS file in your IDE a.k.a. web editor and save it and upload it to your website.
You should make your <ul> and <ol> have the style list-style:none;
If you make your <a> in the dropdown <li> inline-block instead of display:block your menu will look the same in all the browsers.
I am having a weird problem with #font-face and svg images specifically on the Samsung Internet Browser on a webpage I am developing. It has some pretty strange issues.
Part 1: The font-face problem.
I am using 2 font-faces. For some reason in the footer area they load perfectly fine. But in other parts of the document they don't. Example:
Image of footer area
On this image, the blockquote is displayed with the correct font, below that the Follow Us part uses the second font-face and it displays correctly too. The About Us heading uses the same font-face as the blockquote element but it doesn't display correctly. Now, the second image:
Image of header area
The problem here is that the About Us huge heading uses the same font as the Follow us text in the footer area (visible in image 1), but it's not displaying correctly.
Part 2: The SVG image problem
In the Image of header area if you focus on the upper border of the text container below About Us you can see that there's a very deformed SVG logo that says Petit Délice. If I open the image in a new tab it displays correctly, but inside the page it doesn't. I was thinking of using png substitution for browsers without svg support but from what I can see it wouldn't be of use in this case as the browser does support SVG.
Now, these two issues only occur in that specific browser and from what I've been able to check it happens in Android 4.2 and 4.4 on Samsung phones.
The site works perfectly fine on Chrome (both Android and iOS), Firefox and on Safari, but the customer has a Samsung phone and for some reason uses the s*itty browser it has by default which is causing me severe headaches.
You can check the site on this link
I have recently used the awesome font icon codes to replace text in a navigation link on my sqaurespace site. The icon appears fine however i get this weird " /> symbols appear at the start and end of the page linked with the awesome font icon. Also the code of the awesome font icon (instagram) appears on the tab on which my website is open instead of the icon or simply the text. I am using Safari. Could really use some help with this especially with my practically non-existent knowledge of coding. Appreciate any ideas you might have!
Thanks!
Stephanie
Surprisingly the SideBarPanel is not the full height of the container by default. I can't figure out how to make it 100% height. This is what it looks like currently.
Notice how its a little less than half the height of the sidebar container. Other panels don't have this issue. I've tried setting the html and body of the panel to 100% through CSS, and I've tried calling
sidebar.setHeight('100%');
both before and after sidebar.setPage. Instead of doing anything, it causes nothing to be displayed (probably because it doesn't support % height from this method). I don't know how to debug the JS or CSS of devtools extensions, so I am not sure how to figure out what is breaking. I know error's can be viewed from the Chrome Devtools Extension, but no error is thrown in this case.
As a bonus question, showing me how to debug devtools extensions would be nice. (Googling impossible since you just get normal debugging guides.)
In case anyone else comes across this when googling, this looks like it's currently fixed in Chrome canary: https://bugs.chromium.org/p/chromium/issues/detail?id=438126