Hello fellow developers!
My colleague sent me a screenshot (partly in cover pic, complete screenshot at the end of this post) from his browser when reading my blog post about Tailwind. The fullscreen buttons which are in the top-right corner of a code blog appeared huge to him. I couldn't debug this at his machine, but I dug out the offending component with dev tools and ended up with this block
<div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512" class="highlight-action highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path fill="#fff" d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"></path> </svg> </div>
which seems to include the
svg path of the fullscreen icon. I noticed that the
viewbox is huge (448 x 512). I bet there is some css which normally overrides this size, but in his case, it did not load. I could not reproduce this, but he sent me some console debug from Firefox where it happened, but fixed on reload. He said he didn't use any ad blockers, but Firefox might block something by default. Anyway, I don't think it's about blockers because it did fix with a reload.
13:28:59.784 Loading failed for the <script> with source “https://practicaldev-herokuapp-com.freetls.fastly.net/packs/js/runtime~Search-5ec5f41eb3c09400436a.js”. my-first-date-with-tailwind-57d7:28:1 13:28:59.852 Loading failed for the <script> with source “https://practicaldev-herokuapp-com.freetls.fastly.net/assets/hello-dev-a33d069dda0cc1cfef81b71ac053adb1c4cfb617ad4140d02892b548b3081161.js”. my-first-date-with-tailwind-57d7:1591:1 13:28:59.921 Loading failed for the <script> with source “https://practicaldev-herokuapp-com.freetls.fastly.net/assets/base-7b4225a18255cd93f336b035a111a621d1f896f66fa18e26141c1958a7dbeabb.js”. my-first-date-with-tailwind-57d7:31:1 13:28:59.992 Loading failed for the <script> with source “https://practicaldev-herokuapp-com.freetls.fastly.net/packs/js/Search-5b0e630aa6f089abbc66.chunk.js”. my-first-date-with-tailwind-57d7:30:1 13:28:59.993 Loading failed for the <script> with source “https://practicaldev-herokuapp-com.freetls.fastly.net/packs/js/vendor-2db052da96e92ab3c700.chunk.js”. my-first-date-with-tailwind-57d7:29:1 13:29:00.004 Uncaught TypeError: window.InstantClick is undefined 254 responseTemplates.js:3 Webpack 4 responseTemplates.js:3 13:29:00.218 Request to access cookie or storage on “<URL>” was blocked because it came from a tracker and content blocking is enabled. 2
Of course, this is not a major issue as it probably does not happen a lot, but on the other hand, if the
viewbox of the
svg element is unnecessarily too big, it could be fixed. Anyway, this is just an assumption of what happens, please chime in if you come to the same or different conclusion. For some reason, this is bugging me, probably not least because this is happening to a person who reads my blog 😅