Google Says My Site Not Mobile Friendly Because Content Wider than Screen
A while ago I ran into a problem where the last padding of my horizontal scrolling gallery does not display. I discussed my solutions with my friend Huijing, who then dived deeper into this issue and wrote an entertaining article about this.
As you can see from this image taken from Huijing’s demo of the problem, the last padding to the right of the last image is not showing up.
So the pseudo element solution she discussed in the article was how I initially solved the problem. In a simple screenshot, the solution looks like this:
For your reference to play around with this, I copied Huijing’s demo to a glitch project that extracts this solution for easier inspection, sorry Codepen 🙈.
Today, however, I received an issue ticket regarding this. Apparently Google SEO is not happy with that pseudo element. At least during the “mobile friendly test”, it’s complaining that “content wider than screen”.
How does Google even figure out about that pseudo element? I’ve played around a little bit and realize that as long as I render that pseudo-element, even if I set its width to 0, it is still breaking the mobile friendly test.
Honestly, we haven’t figured out the magic behind Google’s SEO. The most relevant information I found on this topic is the Content Sized Correctly for Viewport audit, but our case actually passes the relevant test case mentioned in the info sheet, i.e.,
window.innerWidth === window.outerWidth. Maybe we should go to the next Google Dance and have some opinions about this?
Eventually, we decided that we’ll go with the border solution, the other solution that Huijing mentions in her article, where you render a transparent border. She mentions an issue regarding scroll bars, as in you can’t style them for windows browsers. Together with our special UI requirement, we added the border right to the last item instead.
The fact that border does and a zero width pseudo-element does not pass the audit by the name “content wider than screen” is still beyond my comprehension. Someone in the room is drunk.
Oh and speaking of scroll bars, you absolutely have to read this amazing article Two Browsers Walked into a Scrollbar.
A morning of my youth,
Night Mode with Mix Blend Mode: Difference
I came across the idea of implementing night mode using
mix-blend-mode: differencewhen I was preparing for my talk This World Mixed and Blended (these slides require color font support, i.e., FireFox / Safari). The original idea was only meant for a showcase and the browser support is currently limited.
Still, I implemented it to my dev blog and had a lot of fun. So this will be what this post is about. Meanwhile, as I thought more about it, it occurs to me now that this can be a legit preferred way night mode is to be done. And let me share a bit about the intuition behind that as well.
Reverse Engineering the Blending Mode of Gilbert Color
I’ve been preparing for my Talk.CSS talk about
mix-blend-modethis week. Meanwhile, if you happen to have come across this cute little community called SingaporeCSS, and are even in our facebook group, you’d notice that the banner, though dates back to Jan 2018, uses an interesting display font.
Do You Spam Flex Box Also?
Things learned reading CSS Flexible Box Layout Module Level 1.
Content Width Determination with the Box Model
I was working on a this design that contains a few badges aligned like this on a corner. The content of those badges is not fixed, so I do not know the exact width of each of them. However, the design requires that they have flexible widths.
How I Started Reading `mix-blend-mode` and What They Are Creating with It
Transform Establishes Containing Block for Descendants
A problem came up when I was trying to draw a heart using CSS following this guide.
Understanding the Cubic Bézier Curves
A bit intuitive exploration of the math and physics behind Bézier curves.