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 😅
Top comments (2)
Hi Saija, I'm coming across the same issue in my Nuxt blog...
blog.chiubaca.com/wip/typescript-a... (change to dark mode)
Very weird, thought maybe I had to parse the the page with highlight.js or something first, but that seems like a weird dependancy.
I'm following your bug below, doesnt seems like there is a going to be a fix for this any time soon? :/
Just a fyi, I created a bug report about this: github.com/forem/forem/issues/11747