My Monkey Do

A Log of Coding Solutions

chrome

Thisisunsafe

by

Problem

Sometimes you need to run https sites locally and you can’t get by Chrome’s warning of NET::ERR_CERT_INVALID. Google has removed the link to just bypass this warning recently.

Solution

While this is more of a workaround than a solution (you should resolve the invalid cert), you can get by Chrome’s security warning by typing “thisisunsafe”. Don’t type it in the address bar, just have the window in focus. You won’t see what you’re typing, but when you finish typing the browser window will reload and display the site.

How to stop redirect from http:// to https:// in Chrome

by

Problem

I’ve been trying like crazy to get to my local website at site.dev, but I keep getting redirected to https://site.dev and of course it doesn’t work because I don’t have a SSL certificate for that domain.

Solution

As of December 2017, Chrome 63, Chrome is forcing all .dev domains to be redirected to HTTPS via a preloaded HTTP Strict Transport Security (HSTS) header.  The .dev TLD is an actual legitimate TLD so you will need to change your local development setup to use something like http://site.localhost .

A more detailed explanation can be found here:

https://ma.ttias.be/chrome-force-dev-domains-https-via-preloaded-hsts/

Chrome Zoom Shifts Layout

by

Problem:

When zooming in or out on Chrome, the widths of elements increases very slightly and causes some elements to shift to the next line.

Solution:

The actual problem is Chrome adjusts the widths of elements by tenths.  So something like 141px will turn into 141.1px which in turn causes all your elements to be just slightly bigger and not fit on one line.

I thought the solution to this was to go through all the problem elements and re-set the size to the original size.  However, it turns out you just have to go through the elements in javascript and Chrome will re-set the widths for you.  This leads me to believe this width adjustment on zoom is a bug in Chrome.  Below is what solved my problem in jQuery:


var menuItems = $("#navigation .menu a");
$(window).resize(function() {
menuItems.each(function(i, v){
//by just going through the menu items it seems to fix the width rounding on zoom.
});
});